JavaScript、初めての構文チェック

世の中の流れなのか、最近、フロントばかりをやっている僕です。

JavaScriptの構文チェックを初めてやってみたので、そのメモです。

構文チェックにはESLintを使ってみました。

インストール

% npm install eslint --save-dev

"devDependencies": {
  "eslint": "^7.0.0"
},

次にESLintの設定。グローバルにインストールしなくてもnpxコマンドを使えばいいので、便利ですね。

% npx eslint --init

ESLintをどのように使用しますか？

わりかし色々やって欲しいので、シンタックスのチェックと問題あるコードの解析、そしてコードスタイルの適用の3番を選択。

? How would you like to use ESLint? (Use arrow keys)
  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

あなたのプロジェクトでTypeScriptを使っていますか？

お！これはTypeScriptで使われていたTSLintが統合されたやつですね。

? Does your project use TypeScript? (y/N)

どこでソースコードを実行しますか？

? Where does your code run? 
 ◯ Browser
❯◉ Node

プロジェクトのスタイルをどのように定義しますか？

有名なコーディングガイドラインを選んでもいいですが、ここは初めてなので、質問に答えてスタイルを選択。

? How would you like to define a style for your project? 
  Use a popular style guide 
❯ Answer questions about your style 
  Inspect your JavaScript file(s)

構成ファイルをどの形式にしたいですか？

ググるとJSON形式が多いですが、やっぱYAMLで

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

インデントのどのスタイルを使用しますか？

出ました派閥争い。Tabsで

? What style of indentation do you use? (Use arrow keys)
❯ Tabs 
  Spaces

文字列にはどの引用符を使用しますか？

? What quotes do you use for strings? 
  Double 
❯ Single

どの行末を使用しますか？

? What line endings do you use? (Use arrow keys)
❯ Unix 
  Windows

セミコロンが必要ですか？

? Do you require semicolons? (Y/n)

これで終わりです。.eslintrc.ymlができました。

試しに実行してみます。

% npx eslint test.js

vscodeの設定

せっかく、ESLintを入れたのだかvscodeでもコードを自動修正したり、警告するようにしたい。

というわけで、マイクロソフトがサポートしているESLintをインストール。

僕の場合はsettings.jsonを以下のようにしました。タブとかの設定もまとめて載せてますけど、重要なのはeditor.codeActionsOnSave。これがESLintの自動修正を保存時にやってくれるやつ。

"editor.formatOnType": true,
"editor.detectIndentation": false,
"editor.insertSpaces": false,
"editor.renderWhitespace": "all",
"editor.tabSize": 2,
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
}