Skip to content

Instantly share code, notes, and snippets.

@LeeDDHH
Last active Sep 12, 2021
Embed
What would you like to do?
eslintの設定に関するあれこれ

eslintのインストール

npm install eslint --save-dev


eslintの初期設定

設定ファイルの生成

npx eslint --init

ウィザード形式の質問

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?

  Does your project use TypeScript?  No / Yes

Where does your code run?

  Browser
  Node

How would you like to define a style for your project?

  • How would you like to use ESLint?enforce code style を選択した時のみ
  Use a popular style guide
  Answer questions about your style
  Inspect your JavaScript file(s)

Which style guide do you want to follow?

  • How would you like to use ESLint?enforce code style を選択した時のみ
  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

The config that you've selected requires the following dependencies

  • 質問の回答に合わせて、パッケージの依存関係をdevDependenciesとしてインストールするかどうかを聞かれる
eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest eslint-config-standard@latest eslint@^7.12.1 eslint-plugin-import@^2.22.1 eslint-plugin-node@^11.1.0 eslint-plugin-promise@^4.2.1 @typescript-eslint/parser@latest
? Would you like to install them now with npm?  No / Yes

eslintの実行

# eslintの実行
npx eslint . --ext ts

# exlintの実行後、事項修正
npx eslint . --ext ts --fix

VSCodeで使う場合


.eslintrc.json で設定を書く

文 (Statement) の末尾にセミコロンを常に書く

"rules": {
  "semi": ["error", "always"],
  "semi-spacing": ["error", {"after": true, "before": false}],
  "semi-style": ["error", "last"],
  "no-extra-semi": "error",
  "no-unexpected-multiline": "error",
  "no-unreachable": "error"
}

文 (Statement) の末尾にセミコロンを常に省略する

"rules": {
  "semi": ["error", "never", {"beforeStatementContinuationChars": "never"}],
  "semi-spacing": ["error", {"after": true, "before": false}],
  "semi-style": ["error", "first"],
  "no-extra-semi": "error",
  "no-unexpected-multiline": "error",
  "no-unreachable": "error"
}

文 (Statement) の中括弧 ({}) 内のパディングを許可する

"rules": {
  "object-curly-spacing": [2, "always"]
}

parserOptions は合っているのに、 Parsing error: Cannot read file の注意文が表示される場合

  • VSCodeを使っている場合は、プロジェクト内に .vscode ディレクトリを生成し、 settings.json に以下の設定をする
{
  ︙
  "eslint.workingDirectories": ["functions"]
  ︙
}

Expected indentation of 6 space characters but found 2 の注意文が表示される場合

"rules": {
  "indent": [2, 2]
}

JavaScriptでの書き方

objecthasOwnProperty を使う時

if (obj && Object.prototype.hasOwnProperty.call(obj, "key"))

参考

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment