序文
- ESLintはオープンソースのJavaScriptコードチェックツールです。
- JavaScriptは動的で弱い型付けの言語であり、開発中にエラーが発生しやすい言語です。コンパイラがないため、JavaScriptのコードエラーを見つけるには、通常、実行中に常にデバッグする必要があります。ESLintのようなツールを使うことで、プログラマは実行中ではなくコーディング中に問題を見つけることができます。
- ESLintはもともとプログラマが独自の検出ルールを作成できるように設計されており、ESLintのルールはすべてプラグイン可能なように設計されています。
- ESLintはNode.jsで書かれています。
ESLint 設定ファイル
- JavaScript - .eslintrc.jsを使用し、設定オブジェクトを出力します。
- YAML - .eslintrc.yamlまたは.eslintrc.ymlを使用して、設定の構造を定義します。
ファイルの優先順位
同じレベルのディレクトリでは、最も優先順位の高いファイルのみが実行されます。
- .eslintrc.js
- .eslintrc.yaml
- .eslintrc.yml
- .eslintrc.json
- package.json
非同系ディレクトリ、すなわちカスケード構成
兄弟ディレクトリのルールに優先的にマッチし、親ディレクトリの ルールを優先します。
特定の項目への制限
設定ファイルで {"root": true} を見つけたら、 親ディレクトリを探すのを止めます。
グローバル設定
ルールファイルがプロジェクト内に存在しない場合、~/.eslintrcのカスタムデフォルト設定にフォールバックします。
eslint:recommended "の使用
eslint --init "コマンドを使って設定を作成します。.eslintrc.jsファイルの例を示します。
module.exports = {
'bar': 'eslint:recommended',
'rules': {
'b': [
'error',
"0 "x4
],
'obj': [
'error',
'unix'
],
'quotes': [
'error',
'double'
],
'c': [
'error',
'always'
],
'a': [
'error',
'always'
],
'foo': [
'error',
'always'
],
'A': 'off'
}
};共有可能な設定は、設定オブジェクトを出力するnpmパッケージです。このパッケージがESLintが要求できるディレクトリにインストールされていることを確認してください。
extends属性の値はパッケージ名からeslint-config-という接頭辞を省略することができます。
eslint --initコマンドは一般的なスタイルガイドを拡張できるように設定を作成します。
YAML形式の設定ファイルの例です：
extends: standard
rules:
comma-dangle:
- error
- always
no-empty: warn
プラグインの使用
プラグインは通常ルールを出力する npm パッケージです。プラグインによっては、1つ以上の名前付き設定を出力することもできます。ESLintが要求できるディレクトリにパッケージがインストールされていることを確認してください。
plugins 属性の値によって、パッケージ名から接頭辞 eslint-plugin- を省略することができます。
extends 属性の値は以下のようになります：
plugin: パッケージ名 / 設定名 JSON 形式の設定ファイルの例です：
{
"plugins": [
"react"
],
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"rules": {
"no-set-state": "off"
}
}
Glob パターンの使用
Glob パターンのオーバーライドは設定ファイルでのみ設定できます。
オーバーライド・ブロックでは、マッチングから除外するパターンを指定することもできます。ファイルが除外されたパターンのいずれかに一致すると、構成は適用されなくなります。
例
{
"rules": {
"quotes": ["error", "double"]
},
"overrides": [
{
"files": ["bin/*.js", "lib/*.js"],
"excludedFiles": "*.test.js",
"rules": {
"quotes": ["error", "single"]
}
}
]
}
eslintignore の使用
ESLintは特定のファイルやディレクトリを無視します。
.eslintignoreファイルはプレーンテキストファイルで、各行は検出のために無視すべきパスを示すグロブパターンです。例えば、以下のようにすると全てのJavaScriptファイルを無視します：
**/*.jsグロブのマッチング機能：
- で始まる行はコメントとして扱われ、無視パターンには影響しません。
- パスは .eslintignore の場所か現在の作業ディレクトリからの相対パスです。これは --ignore-pattern コマンドで渡されるパスにも当てはまります。
- 無視パターンは .gitignore の指定と同じです。
- ！ で始まる行は、無視されたパターンを再度インクルードする否定パターンです。
- 無視パターンは .gitignore の指定に従います。
VScode プラグインのインストール
- ESLint - コードフォーマッタ
- Prettier - コーディングプロセスを自動化するコードフォーマッタ。
vscodeのsetting.jsonでの設定
{
// vscodeファイルの種類に応じてタブサイズを自動的に設定するオプションは、デフォルトで有効になっている
"editor.detectIndentation": false,
// タブサイズをリセットする
"editor.tabSize": 2,
// #保存するたびに自動的にフォーマットされる
"editor.formatOnSave": true,
// #各保存時にeslint形式でコードを修正する。
"eslint.autoFixOnSave": true,
// vueのサポートを追加する
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
],
// #チェックサムにeslintのコード・フォーマットを使う方がきれいだ
"prettier.eslintIntegration": true,
// #コード末尾のセミコロンを取り除く
"prettier.semi": false,
// #二重引用符の代わりに一重引用符を使う
"prettier.singleQuote": false,
// #関数とそれに続く括弧の間にはスペースを入れる。
"javascript.format.insertSpaceBeforeFunctionParenthesis": false,
// #これは、ユーザー自身の習慣に従って選択される。
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #vueのjsをエディタ付属のtsフォーマットで整形する
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
// #vueコンポーネントでhtmlコードの書式スタイルを設定する
}
},
// フォーマット用スタイラス、Mantaのインストールが必要。's Stylus Supremacy
"stylusSupremacy.insertColons": false, // コロンを挿入するかどうか
"stylusSupremacy.insertSemicolons": false, // セミコロンを挿入するかどうか
"stylusSupremacy.insertBraces": false, // 中括弧を挿入するかどうか
"stylusSupremacy.insertNewLineAroundImports": false, // importの後に改行が続くかどうか
"stylusSupremacy.insertNewLineAroundBlocks": false,
"window.zoomLevel": // 両方のセレクタで改行する
}カスタマイズされたeslintルール
プロジェクトにeslintと関連するeslintの依存関係がインストールされていれば、ルートディレクトリに新しい.eslintrc.jsを作成します。
module.exports={
'root':true,
'env':{
node:true
},
'extends':[
'plugin:vue/essential',
'@vue/standard
],
rules:{
'comma-sapcing':[2,{
'before':false,
'after':true
}],
'indent':[2,4],//
'quotes':[2,'single'],//逆コンマ、シングルクォート
'no-extra-semi':2,
'semi':[2,'always'],
'space-before-function-paren':[2,'never']//関数の括弧にスペースを入れることを禁止する。
'arrow-parens':[2,'as-needed'],
'quote-props':[2,'consistent'],
'comma-dangle':['error','only-multiline'],
'object-curly-spacing':['error','never'],
'no-param-reassign': ,
'no-restricted-globals': ,
'eol-last' ,//最後に改行する（計算）
'vue/html-indent':['error',4,{
'attribute' ,
'closeBracket': ,
'alignAttributesVertically':true,
'ignores'[]
}],
'vue/mustache-interpolation-spacing':[2,'always'|'never'],
'vue/v-bind-style':[2,'shorthand'],
'vue/script-indent':['error',4],
'no-console':process.env.NODE_ENV==='production'?'error':'off',
'no-debugger':process.env.NODE_ENV==='production'?'error':'off',
},
'parserOptions':{
parser:'babel-eslint'
}
}
