👋
VSCodeでESLintを使いましょう
インストール
ESLintをインストールします
sudo npm install -g eslint
eslint --version
でインストール成功しているかを確認します
そして、設定ファイルを作ります
フォルダ内に.eslintrc
というファイルを作ります
そして、以下のように書きます
.eslintrc
{
"env": {
"es6": false,
"browser": true,
"node": true,
"jquery": false
}
}
次はJavaScriptファイルを書きましょう
bad-code.js
というファイルを作り、以下のようにエラー入りのコードを書きましょう
設定はES6を使用することを禁止させるので、敢えてES6を書きましょう
base-code.js
const [a, b] = [123, 1234];
コマンド検査の使い方
以下のコマンドをRun
eslint bad-code.js
予想通り以下のメッセージが出ました
error Parsing error: The keyword 'const' is reserved
ちなみに全てのJSファイルを検査するには以下のコマンドです
eslint *.js
セーブしてすぐにESLint検査
プラグインを使って、セーブすると自動的に検査しましょう
まずは「ESLint」というプラグインをインストールします
プラグインをインストール後、bad-code.js
というファイル名は赤になりました
マウスをconst
の部分に触ると、エラーメッセージが出ました
ターミナルの「Problems」というタブにもエラーメッセージが出ました
注意
npm eslintが存在してない、ただ直接にVSCodeプラグイン「ESLint」を使う場合は
コードの検査が不具合になる状況が多いです
なのでnpmのeslintは削除せずにおきましょう
コードの修正
修正は二つの方法はあります
VSCodeの修正
VSCodeの下方の青いアイコンをクリック、「Fix this no-var problem」をクリックします
コマンドでの修正
ターミナルに以下のコマンドをRun
eslint bad-code.js --fix
Discussion