概要

既存のVueプロジェクトにLintを導入したかったのでやってみました。

ゴール

ESLintを導入する
VSCode上でLintのエラーが表示される

環境

	Version
macOS	Catalina 10.15.4
node	10.17.0
Vue	2.5.18

ライブラリのインストール

npm i eslint --save-dev

初期設定

npx eslint --init

上のコマンドでconfigファイルが作成される。
選択肢はプロジェクトに合わせて以下のように選択した。
(TypeScript化したい。。)

? How would you like to use ESLint? To check syntax and find problems
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? Vue.js
? Does your project use TypeScript? No
? Where does your code run? Browser
? What format do you want your config file to be in? JavaScript
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest
? Would you like to install them now with npm? Yes

処理終了後、.eslintrc.jsが作成された。
json形式のほうが一般的なのかな？

VSCode

プラグインのインストール

ESLint - Visual Studio Marketplace

必要なライブラリ

eslintのグローバルインストールが必要みたい

npm install -g eslint

ルールの設定

ルールを2つ追加してみる。

文末のセミコロンは必須
複数行の配列、オブジェクトでは最後のコンマは必須

eslintrc.js

module.exports = {
  ...
+ "rules": {
+   "semi": [ "error", "always" ],
+   "comma-dangle": [ "error", "always-multiline" ],
+ }
};

VSCodeを確認すると、これらのルールに反するものが問題として検知された！

グローバル変数への対応

グローバル変数がno-undefのエラーになってしまう。
グローバルであることを明示的に示すことで解決できた。

eslintrc.js

module.exports = {
  ...
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly",
+   "firebase": true,
+   "process": true,
  },
};

おわりに

GitHubActionsを使ったチェックとかやってみたい！

参考