eslintとprettierのインストール

> npm i -D eslint  prettier eslint-config-prettier eslint-plugin-prettier

eslintの初期設定

> npx eslint --init
√ How would you like to use ESLint? · problems    
√ What type of modules does your project use? · commonjs
√ Which framework does your project use? · none
√ Does your project use TypeScript? · No
√ Where does your code run? · browser
√ What format do you want your config file to be in? · JavaScript
Successfully created .eslintrc.js file in C:\work\javascript\nodejs-nyumon

eslintの設定にprettierとバッティングしないようにするため、"plugin:prettier/recommended" を .eslintrc.js の extends に追加する。結果、下記のようになる。

module.exports = {
 env: {
   browser: true,
   commonjs: true,
   es2021: true,
 },
 extends: ["eslint:recommended", "plugin:prettier/recommended"],
 parserOptions: {
   ecmaVersion: 12,
 },
 rules: {},
};

VSCodeで自動的にESLintかけるために、拡張機能を導入する

「ESLint dbaeumer.vscode-eslint」拡張機能を導入する

VSCodeでファイル保存時、Prettierでコードフォーマットしてくれるようにうに拡張機能の導入と設定をする。

「Prettier - Code formatter esbenp.prettier-vscode」拡張機能を導入する

VSCode で Ctrl + , 設定画面を開く。設定の検索で「save」。「Editor:Format On Save」にチェックを入れる

確認

> npx eslint .\app.js

VSCodeでコード編集時、ESLintの警告が出ることを確認する

VSCodeでコード保存時、自動的に整形してくれることを確認する