vsCode でコードを解析する ESLint を導入する

下記 本家 より。

ESLintは、ECMAScript/JavaScriptのコードに見られるパターンを特定して報告するためのツールで、コードの一貫性を高めてバグを回避することを目的としています。多くの点でJSLintやJSHintと似ていますが、いくつかの例外があります。

ESLint を導入していきますがパッケージマネージャは npm でプロジェクトは作成済みとします。

参考

インストールする。

  1. vsCode の拡張機能の「ESLint」を検索しインストールします。
  2. 拡張機能だけでは動作しないので次のコマンドで ESLint をインストールします。
npm install eslint --save-dev

設定ファイルを作成する

ESLint の設定ファイルを作成します。

npx eslint --init

上記のコマンドを実行すると次の質問をされるので回答していきます。

✔ How would you like to use ESLint?
✔ What type of modules does your project use?
✔ Which framework does your project use?
✔ Does your project use TypeScript?
✔ Where does your code run?
✔ What format do you want your config file to be in?
✔ Would you like to install them now?
✔ Which package manager do you want to use?

設定ファイルを確認する

上記の質問に答え終わると「.eslintrc.json」が作成されました。
中身は下記の通りです。

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential"
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
}

確認

これでエディタを確認すると問題がある個所を破線で教えてくれるようになりました。　　
せっかくなので問題箇所の一例を載せておきます。

Component name "Todo" should always be multi-word

↓ NG

export default {
  name: 'Todo',
}

↓ OK

export default {
  name: 'TodoList',
}

↓ 本家確認
https://eslint.vuejs.org/rules/multi-word-component-names.html

The "isLogin" property should be a constructor

↓ NG

props: {
  isLogin: false
},

↓ OK

props: {
  isLogin: {
    type: Boolean,
    default: false,
  }
},

↓ 本家確認
https://eslint.vuejs.org/rules/require-prop-type-constructor.html