Upgrade to Pro — share decks privately, control downloads, hide ads and more …

eslint-flat-config

 eslint-flat-config

ESLint Flat Configで誰もが簡単に Lintを設定できる時代へ。
新しいESLintの設定方法、ESLint Flat Configを紹介します。

てけし

April 01, 2023
Tweet

More Decks by てけし

Other Decks in Programming

Transcript

  1.             /)
            ///)
           /,.=゙''"/   
    /     i f ,.r='"-‐'つ____こまけぇこたぁいいんだよ!!
   /      /   _,.-‐'~/⌒  ⌒\


        /   ,i   ,二ニ⊃( •). (•)\
    /    ノ    il゙フ::::::⌒(__人__)⌒::::: \
       ,イ「ト、  ,!,!|     |r┬-|     |
      / iトヾヽ_/ィ"\      `ー'´     / ひとことでまとめると、、
  2. そ れ っ て 最 高 じ ゃ な い

    で す か 最高である!!!
  3. import customConfig from "eslint-config-custom"; export default [ customConfig, { files:

    ["**/*.js", "**/*.cjs"], rules: { "semi": "error", "no-unused-vars": "error" } }, { files: ["**/*.js"], rules: { "no-undef": "error", "semi": "warn" } } ]; JavaScriptと同じように、 直感的にわかりやすい構文 例えば、 Override!
  4. // .eslintrc { "extends": ["standard"] } // eslint.config.js import {

    FlatCompat } from '@eslint/eslintrc' const compat = new FlatCompat() export default [ ...compat.extends('eslint-config-standard'), ] config形式がflat configに対応しきれ てない関係上、ここは少しややこしい 設定サンプル
  5. import ts from "@typescript-eslint/eslint-plugin" import tsParser from "@typescript-eslint/parser" export default

    [{ files: ["src/**/*.ts", "src/**/*.tsx"], languageOptions: { parser: tsParser, }, plugins: { "@typescript-eslint": ts, }, rules: { ...ts.configs["recommended"].rules, ...ts.configs["eslint-recommended"].rules, } }]; TypeScript環境に TypeScript用のLintを入れる 例えば、 https://www.sunapro.com/eslint-flat-config/
  6. import jsdoc from "eslint-plugin-jsdoc"; export default [ { files: ["**/*.js"],

    plugins: { jsd: jsdoc } rules: { "jsd/require-description": "error", "jsd/check-values": "error" } } ]; せめてJSDocを書きたい TypeScript化が間に合わないチーム 右のようなlintConfigを置くことで JSDocの記述を強制できる 例えば、 https://eslint.org/blog/2022/08/new-config-system-part-2/
  7. • ESLint's new config system, Part 2: Introduction to flat

    config • Config File Simplification • Flat Config導入完了! 新しいESLintの設定フォーマットを使ってみた • eslintをflat configで書き換える • ESLintのconfigがどのように変わり得るか(flat configとは何か) 参考資料