eslint について

eslint とは

JavaScript/TypeScript の構文が、スタイルガイドラインなどの指定したルールに違反してないかをチェックして、違反してたら指摘してくれたり、修正してくれたりする仕組みです。

確かに、ソースコードのフォーマットが統一されていると読みやすいです。

インストール & init

早速インストールします。

# インストール
npm install --save-dev eslint

# バージョン確認
npx eslint -v
v8.19.0

イニシャライズ

イニシャライズツールを利用してで対話形式で eslint を設定できます。

npx eslint --init

厳しめにしたい方は Airbnb のルールがおすすめです。

? Which style guide do you want to follow? ...
  Airbnb: https://github.com/airbnb/javascript

以下対話形式の例です。(eslint v8.19.0 の場合)

? How would you like to use ESLint? ...
  To check syntax only
  To check syntax and find problems
> To check syntax, find problems, and enforce code style

? What type of modules does your project use? ...
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

? Which framework does your project use? ...
  React
  Vue.js
> None of these

? Does your project use TypeScript? » No / Yes

? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
√ Node

? How would you like to define a style for your project? ...
> Use a popular style guide
  Answer questions about your style

? Which style guide do you want to follow? ...
  Airbnb: https://github.com/airbnb/javascript
> Standard: https://github.com/standard/standard
  Google: https://github.com/google/eslint-config-google
  XO: https://github.com/xojs/eslint-config-xo

? What format do you want your config file to be in? ...
> JavaScript
  YAML
  JSON

Checking peerDependencies of eslint-config-standard@latest
The config that you ve selected requires the following dependencies:

@typescript-eslint/eslint-plugin@latest eslint-config-standard@latest eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 eslint-plugin-promise@^6.0.0 @typescript-eslint/parser@latest
? Would you like to install them now? » No / Yes

? Which package manager do you want to use? ...
> npm
  yarn
  pnpm

イニシャライズ結果

イニシャライズの結果、.eslintrc.jsとpackage.jsonは以下の様になります。

.eslintrc.js

module.exports = {
  env: {
    es2021: true,
    node: true,
  },
  extends: ["standard"],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["@typescript-eslint"],
  rules: {},
};

package.json

{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.30.5",
    "@typescript-eslint/parser": "^5.30.5",
    "eslint": "^8.19.0",
    "eslint-config-standard": "^17.0.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-n": "^15.2.4",
    "eslint-plugin-promise": "^6.0.0"
  }
}

文法チェックの方法

文法チェックの方法は以下のコマンドを package.json に登録してnpm run lintで起動するようにします。

src フォルダ以下にある ts ファイルすべてをチェックしてくれます。

package.json

  "scripts": {
      "lint": "eslint src/**/*.ts",
  },

コマンド

npm run lint

おわりに

次回は応用編としてフォーマッタの Prettier 連携を紹介したいと考えています。

また、React 向けのおすすめ設定もあるので紹介したいと思います。