概要
既存の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を使ったチェックとかやってみたい！