LoginSignup
1

More than 3 years have passed since last update.

ESLintを導入してVSCode上で問題として検知する

Last updated at Posted at 2020-04-04

概要

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

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1