大事な前提
この記事は 2025 年 8 月時点 の状況に基づいて記述しています。
Node.js, ESLint, Prettier いずれもバージョンアップが頻繁に行われているため、1 年後あるいは数ヶ月後にはこの記事の内容は不正確になっている可能性があります。
ViteによるJavaScript環境構築
$ npm create vite@latest sample-project
お好みのプロジェクト名(sample-project)を入力して、ViteによるJavaScriptプロジェクトを作成します。
◆ Select a framework:
│ ● Vanilla
│ ○ Vue
│ ○ React
│ ○ Preact
│ ○ Lit
|
◆ Select a variant:
│ ○ TypeScript
│ ● JavaScript
ESLint
ESLintとは
ESLintとは、JavaScriptのコードが規約に沿って書かれているか、指定したルールに違反していないかをチェックをして指摘や修正をしてくれる静的解析ツールです。
プラグインを使用することでTypeScript、Vue.js、Reactなどの様々な種類のコードを解析することができます。
ESLintの導入
JavaScript環境にESLintを導入します。
$ npm init @eslint/config@latest
? What do you want to lint? …
✔ JavaScript
JSON
JSON with comments
JSON5
Markdown
CSS
? How would you like to use ESLint? …
To check syntax only
❯ To check syntax and find problems
? 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
? Does your project use TypeScript? › No / Yes
? Where does your code run? … (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
Node
The config that you have selected requires the following dependencies:
eslint, @eslint/js, globals
? Would you like to install them now? No / › Yes
? Which package manager do you want to use? …
❯ npm
yarn
pnpm
bun
Installing...
(略)
Successfully created /Users/(username)/vite/sample-project/eslint.config.js file.
設定ファイルとして、eslint.config.jsが作成される。
eslintを実行するには、package.jsonにlintコマンドを以下のように追記します。
{
"scripts": {
"lint": "eslint '**/*.{js,ts,html,md}'",
}
}
以下のように実行
$ npm run lint
Prettier
Prettierとは
Prettierはコードの自動整形を行うツールでコードのフォーマットを統一することができます。
Prettierの導入
パッケージの導入
npm i -D prettier eslint-config-prettier
上記コマンド実行によりPrettierとESLintとそれらが競合しないためのパッケージのインストールが完了します。
PrettierによればESLintとPrettierを共存させるためにはeslint-config-prettierが必要となります。
Prettierの設定ファイルの作成
JSONの場合
ファイル名は.prettierrcか、.prettierrc.jsonにします。
{
"tabWidth": 2,
"singleQuote": true,
"semi": false,
}
//最後にセミコロンを追加(デフォルト)
"semi": true
//セミコロンが無いとエラーになる箇所にだけセミコロンを追加
"semi": false
JavaScriptの場合
ファイル名はprettier.config.jsか、prettierrc.jsにします。
export default {
tabWidth: 2,
singleQuote: true,
semi: false,
};
ESLintの設定ファイルにPrettierとの競合を解決する設定を追加
./eslint.config.jsを以下のようにPrettierと競合が起きないように設定を追加します。
import js from "@eslint/js";
import globals from "globals";
import { defineConfig } from "eslint/config";
import eslintConfigPrettier from "eslint-config-prettier"; // 追加
export default defineConfig([
{
files: ["**/*.{js,mjs,cjs}"],
plugins: { js },
extends: ["js/recommended"],
languageOptions: { globals: globals.browser },
},
eslintConfigPrettier, // 追加
]);
prettierを実行するには、package.jsonにformatコマンドを以下のように追記します。
{
"scripts": {
"format": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json}'"
}
}
以下のように実行します
$ npm run format
VSCodeで保存時にPrettierが機能する設定
VSCodeの設定ファイルの作成
以下の.vscode/settings.jsonを作成します。
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2,
"editor.formatOnSave": true,
"eslint.useFlatConfig": true
}
こちらの設定はVS Code上でGUIを操作して追加することも可能です。既存の設定が既にある場合は、その設定に上記の設定を追加すればOKです。
ファイルを保存したときにESLintの自動修正が実行される設定、フォーマッターとしてprettierを使う設定、タブサイズをスペース2個にする設定、ファイルを保存したときにフォーマッターが実行される設定、eslint v9以降のフラットコンフィグを明示的に設定、を追加しました。
ESLintはフォーマッターではないため"editor.formatOnSave": trueだけでは保存時にESLintの自動修正が実行されない点にご注意ください。
また拡張機能の ESLint の説明には「eslint のバージョンが 9.0.0 以上、10.x 未満ならば、eslint.useFlatConfig のデフォルトは true になる」と書かれています。
本プロジェクトではeslint:9.33.0より、設定は不必要に思われます。
しかし、VSCode の設定「ESLint: Use Flat Config」を一度でもチェックしたことがあると、チェックを外した状態が実は "eslint.useFlatConfig": false と設定されてしまう罠がありました。
そのため、明示的にtrueにしています。
settings.jsonを設定しても、VSCodeでPrettierが機能しない
理由
Userのsettings.jsonでJavaScriptだけフォーマッターの無効化が設定されていました。GUIで設定を操作していた際に何かの拍子でチェックが外されたと思われます。
"[javascript]": {
"editor.formatOnSave": false
},
ワークスペースのsettings.jsonでは、JavaScriptだけ特定してフォーマッターの有効化を書く方式ではなかったため(言語全体に対してフォーマットの有効化)、ワークスペースの設定で上手く上書きされなかったようです。
GUIの設定では、以下のようにチェックを入れ、フォーマッターをPrettierに設定すれば良いです。
参考