VSCodeでESLint/Prettierを有効化する (eslint-config-prettierで連携(Prettier公式の推奨設定(2020.6.28時点)))

先日、Next.js のチュートリアルを行うために、環境構築を行った。

takeken1.hatenablog.com

次に、ESLintとPrettierを導入する。

公式ページ

eslint.org marketplace.visualstudio.com prettier.io marketplace.visualstudio.com

やること

ESLintもPrettierもプロジェクトローカルにインストールする
- 理由
  - プロジェクトごとに設定を固定させるため
  - 個人開発の場合はPrettierはVSCodeバンドルを使うことで十分と思うが、チーム開発の場合コードスタイルの一貫性を保つ必要がある。今回はチーム開発で使える環境を構築したいため
PrettierとESLintを共存させるにあたって、2020/6/28にPrettier公式からアナウンスされた推奨設定（eslint-config-prettierを使う）に従う
- 理由
  - ESLintとPrettierのフォーマッタが競合しており、PrettierのみONにしたいため
  - 各種ネット記事ではeslint-plugin-prettierを使うなど、いろいろな共存方法が乱立している（ように見える）が Prettier公式の推奨設定（eslint-config-prettierを使う）がデファクトスタンダードになる可能性が高いと考えたため
- 参考
  - prettier/integrating-with-linters.md at 554b15473dd4032a036d7db91a8f579e624c9822 · prettier/prettier · GitHub
    Linters usually contain not only code quality rules, but also stylistic rules. Most stylistic rules are unnecessary when using Prettier, but worse – they might conflict with Prettier! Use Prettier for code formatting concerns, and linters for code-quality concerns, as outlined in Prettier vs. Linters.
    
    Luckily it’s easy to turn off rules that conflict or are unnecessary with Prettier, by using these pre-made configs:
    - eslint-config-prettier
    - tslint-config-prettier
    - stylelint-config-prettier
    Check out the above links for instructions on how to install and set things up.

create-next-app でNest.jsのひな型を生成する

先日のブログ内で実施しているのでスキップ
（参考まで）WSL2 + Docker Desktop + VSCode（Remote Development）を使わない場合は、単に下記のコマンドを実行することで、Next.jsのチュートリアルのひな型を作成できる

$ npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"

ESLintをインストールする

ESLinstを導入するプロジェクトルートに移動する

$ cd nextjs-blog

ESLint が入っていないことを確認（もし入っていれば ESLint のバージョンが表示される）

$ npm ls eslint
learn-starter@0.1.0 /workspaces/nodesample/nextjs-blog
└── (empty)

ESLint をプロジェクトローカルにインストールする

$ npm install --save-dev eslint

これで package.json に下記が追加される

  "devDependencies": {
    "eslint": "^7.16.0"
  }

ESLintがインストールされたことを確認する（バージョン確認コマンドを実行）

$ npm ls eslint
learn-starter@0.1.0 /workspaces/nodesample/nextjs-blog
└── eslint@7.16.0

ESLintの設定ファイルを作成する

npx eslint --initを実行する

$ npx eslint --init
✔ How would you like to use ESLint?
· To check syntax, find problems, and enforce code style

✔ What type of modules does your project use? 
· JavaScript modules (import/export)

✔ Which framework does your project use? 
· None

✔ Does your project use TypeScript? 
· No

✔ Where does your code run? 
· Browser

✔ How would you like to define a style for your project? 
· Use a popular style guide

✔ Which style guide do you want to follow? 
· Airbnb: https://github.com/airbnb/javascript

✔ What format do you want your config file to be in? 
· JSON

✔ Would you like to install them now with npm? 
· Yes

Installing eslint-config-airbnb-base@latest, eslint@^5.16.0 || ^6.8.0 || ^7.2.0, eslint-plugin-import@^2.22.1
+ eslint-config-airbnb-base@14.2.1
+ eslint-plugin-import@2.22.1
+ eslint@7.16.0

上記コマンドにより、.eslintrc.json が生成される

.eslintrc.json

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "airbnb-base"
    ],
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "rules": {
    }
}

eslint-config-prettier をインストールする

eslint-config-pretterとは
- 参考 GitHub - prettier/eslint-config-prettier: Turns off all rules that are unnecessary or might conflict with Prettier.
  
  Turns off all rules that are unnecessary or might conflict with Prettier. This lets you use your favorite shareable config without letting its stylistic choices get in the way when using Prettier. Note that this config only turns rules off, so it only makes sense using it together with some other config.
下記コマンドを実行しインストール

$ npm install --save-dev eslint-config-prettier
+ eslint-config-prettier@7.1.0

eslint-config-prettierを.eslintrc.jsonの「extends」に追加する

※他の設定を上書きさせるため、必ず最後に配置する

.eslintrc.json

    "extends": [
        "airbnb-base",
+       "prettier"
    ],

Prettierをプロジェクトローカルにインストールする

参考

Install · Prettier
下記コマンドを実行

$ npm install --save-dev --save-exact prettier
+ prettier@2.2.1

VSCodeにESLint拡張をインストールする

拡張機能からESLintをinstall

VSCodeにPrettier拡張をインストールする

拡張機能からPrettierをinstall

Prettierをデフォルトフォーマッタに設定する

setting.json に下記を追加

+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "[javascript]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode",
+    }

保存時のフォーマットを有効化

setting.json に下記を追加

    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true,
    }

これで保存時にPrettierが実行されるようになり、 Prettierと競合するESLintフォーマッタはオフとなった。

以上。