VSCodeでイマドキのJavaScriptの開発環境をサクッと作ろうぜ(VSCodeの設定～Linter編)

はじめに

JavaScriptを昔からちょこちょこ触ってはいるものの、久しぶりにやってみると色々と様変わりしていて「なるほど分からん」となっている人向けの記事。

本記事では、Vue.jsの開発環境を
・VSCodeで良い感じにコードフォーマットをする
・Linterでコードチェックする
・自動テストする
・バンドル版をビルドする
のステップで行えるように紹介をしていく。
※長くなるので、何回かに分けて紹介する。

なにはともあれ、まずはVSCodeの設定をしよう

まずは、拡張機能のインストールからだ。
ESLintの標準的な拡張機能が提供されているので、これをインストールしよう。
また、今回はVue.jsも扱うので、2022/5/1時点ではほぼデファクトスタンダードと言えるVeturをインストールしておこう。

さらに、このプロジェクトでは同じ設定を共有したいので、チェックアウトしたらVSCodeの設定を上書きするように、以下のようにファイルを配置しよう。なお、マルチルートワークスペースにこのプロジェクトを追加してもらわないとこのファイルは機能しないので、注意が必要だ。

<プロジェクトルート>
└── .vscode
    ├── extensions.json
    └── settings.json

extensions.jsonは、このリポジトリをチェックアウトした人が、記載の拡張機能を未インストールの場合にインストールを促すためのファイルだ。

extensions.json

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "octref.vetur"
  ]
}

settings.jsonで、VSCodeにESLintを組み込むための動作設定を行う。

settings.json

{
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[vue]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

"source.fixAll.eslint": trueしておくことで自動補正されて良い感じになる。
自動補正が気持ち悪い人はOFFにしておこう。しっかりLinterでエラーを除去すれば良い。

Linterでコードチェックする

さて、フォーマッターが設定できたので、基本的にはLinterでエラーがでなくなることがなくなるはずだ。

とは言え、まずはESLintをインストールしなくては始まらない。
以下をpackage.jsonに追記して、npm installしよう(個別にそれぞれインストールしても良いが、バージョン指定が面倒なのでpackage.jsonに入れた方が早いはず)。

package.json(抜粋)

  "devDependencies": {
    "eslint": "^7.32.0",
    "eslint-config-standard": "^14.1.1",
    "eslint-plugin-jest": "^26.1.2",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^7.20.0"
  }

次に、Linterの設定を入れていこう。これはそれぞれ好みがあるはずだが、例としてはざっと以下のような感じだ。
ignorePatternsは、各種ツールの設定ファイル系(.で始まるjsファイル)を対象にするために入れている。

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
    'jest/globals': true,
  },
  extends: [
    'standard',
    'eslint:recommended',
    'plugin:vue/recommended',
    'plugin:vue/essential',
  ],
  globals: {
    vue: true,
  },
  plugins: [
    'jest',
    'prettier',
  ],
  rules: {
    // https://eslint.org/docs/rules/array-bracket-newline
    // 配列の先頭のブラケットの後で改行をするか
    //   ⇒ 要素追加時の diff の可読性を考慮して always を設定
    //      ただし、要素数 0 の配列だけは改行すると見づらいので minItems: 1 として [] を許容
    'array-bracket-newline': [
      'error',
      { minItems: 1 },
    ],
    // https://eslint.org/docs/rules/array-element-newline
    // 配列の要素単位に改行をするか
    //   ⇒ 要素追加時の diff の可読性を考慮して always を設定
    'array-element-newline': [
      'error',
      'always',
    ],
    // https://eslint.org/docs/rules/comma-dangle
    // 配列やオブジェクトの最後の要素でカンマを付与するか
    //   ⇒ 要素追加時の diff の可読性やカンマ付与漏れによる構文エラーを考慮して only-multiline を設定
    //      always にすると逆に可読性が下がるので、要素単位に改行するケースのみを対象
    'comma-dangle': [
      'error',
      'only-multiline',
    ],
    'vue/comment-directive': 'warn'
  },
  ignorePatterns: [
    '!.*.js'
  ],
}

さて、package.jsonにESLintを実行するための設定も入れておこう。

package.json(抜粋)

  "scripts": {
    "lint": "eslint contents/**/*.js contents/**/*.vue __tests__/**/*.js",
  }

これで、npm run lintすると、構文チェックを行うことができるようになった！

(続く)