面倒くさがりな人のための ESLint

.eslint.js の設定、何をどうすればいいのかわからん

わかります。設定回り、難しいっすよね。そんなときには、このコマンドを打ち込んでみてください。

# まずは eslint だけ install
npm install --save-dev eslint
or 
yarn add -D eslint

# つぎに、これを実行。
npx eslint --init
or
yarn run eslint --init

すると、、、？

PS C:\Users\me\eslint-sample> yarn run eslint --init
yarn run v1.22.10
$ C:\Users\me\eslint-sample\node_modules\.bin\eslint --init
? How would you like to use ESLint? ...
  To check syntax only
> To check syntax and find problems
  To check syntax, find problems, and enforce code style

となります。「ESLintをどういうふうに使いたいんや？」って聞かれてますね！ node_modules\.bin\eslint に --init というオプションを渡すことで、あとは選択肢に従って自分好みに設定していけば、ひな型が作成されます。 👉参考

とはいっても、prettier 入れときたいよね？

気持ちはわかります。なので、ついでに prettier も入れましょうか。脳死でこのコマンドたたけばよいです。

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier
or
yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

できたひな型に対して、extendsのフィールドに、plugin:prettier/recommendedを追加してあげましょう。prettierのルールを追加させたい場合は、prettier/prettier の箇所にごにょごにょしてあげるとよいです。

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:vue/essential',
    'standard',
    'plugin:prettier/recommended' // 👈追加
  ],
  parserOptions: {
    ecmaVersion: 12,
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    // prettier rules ;; これはお好みです、prettierのルールを適用させたい場合に使用
    'prettier/prettier': [
      'error',
      {
        printWidth: 120, // 1行当たりの文字数制限120
        singleQuote: true, // 文字列はシングルクォート強制
        trailingComma: 'all', // `,`を最後の要素に強制
        semi: true, // `;`を強制
        arrowParens: 'avoid', // arrow関数の引数の`()`が不要なら警告
        tabWidth: 2,
      },
    ],
  },
};

以上で終わり。七面倒くさいことはなし、これで終わりです！！

いろいろ調べてみると、--init 系はいろいろある

そもそもフロントの設定ファイルは覚えることが大変で、バージョンが違えば書き方も違う。その度に書き方を調べては疲弊してしまいます。けれども、何かしら設定ファイルを必要とするようなもの、例えば webpack など、init オプションによるひな型の作成はできることを知っておけば、開発が少しは楽になるかもしれません。

フロントエンドエンジニアっぽい記事久しぶりに書きました🦀