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

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

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

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

インストール

1
% npm install eslint --save-dev

1
2
3
  "devDependencies": {
    "eslint": "^7.0.0"
  },

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

1
% npx eslint --init

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

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

1
2
3
4
? 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 

あなたのプロジェクトはどんな種類のモジュールを使っていますか？

1
2
3
4
? What type of modules does your project use? 
  JavaScript modules (import/export) 
❯ CommonJS (require/exports) 
  None of these 

あなたのプロジェクトはどのフレームワークを使っていますか？

1
2
3
4
? Which framework does your project use? 
  React 
  Vue.js 
❯ None of these

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

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

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

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

1
2
3
? Where does your code run? 
 ◯ Browser
❯◉ Node

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

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

1
2
3
4
? 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で

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

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

出ました派閥争い。Tabsで

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

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

1
2
3
? What quotes do you use for strings? 
  Double 
❯ Single 

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

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

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

1
? Do you require semicolons? (Y/n) 

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

試しに実行してみます。

1
% npx eslint test.js

vscodeの設定

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

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

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

1
2
3
4
5
6
7
8
    "editor.formatOnType": true,
    "editor.detectIndentation": false,
    "editor.insertSpaces": false,
    "editor.renderWhitespace": "all",
    "editor.tabSize": 2,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }