.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 オプションによるひな型の作成はできることを知っておけば、開発が少しは楽になるかもしれません。
フロントエンドエンジニアっぽい記事久しぶりに書きました🦀
↧
