Skip to content

Instantly share code, notes, and snippets.

@LeeDDHH

LeeDDHH/eslint-tips.md

Last active February 11, 2024 07:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save LeeDDHH/61fd4077ba50c677583062565b039fa0 to your computer and use it in GitHub Desktop.
Save LeeDDHH/61fd4077ba50c677583062565b039fa0 to your computer and use it in GitHub Desktop.
Download ZIP
eslintの設定に関するあれこれ
Raw
eslint-tips.md

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]
}

"rules": {
  "indent": ["error", 2, { "offsetTernaryExpressions": true }]
}

JavaScriptでの書き方

object の hasOwnProperty を使う時

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

Unexpected empty method '関数名'. @typescript-eslint/no-empty-function の注意文が表示される場合

変数や式を使わないテンプレートリテラルを制限する

  • バッククォート（`）で囲ったテンプレートリテラルの中で ${} で式の展開がない記述に関してはシングルクォート（'）に変えるようにする
  • 設定
    • クォート表記に関しては、基本的にシングルクォート（'）にする
    • ただし、エスケープ文字として扱うダブルクォート（"）がある場合は、シングルクォート（'）に変えない
    • テンプレートリテラルを無効化するが、すべてのテンプレートリテラルを禁止するわけではなく、式の展開がない記述だけを対象とする 
"rules": {
  "quotes": ["error", "single", { "avoidEscape": true, "allowTemplateLiterals": false }]
}

参考

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