環境
- Next.js v15
- TypeScript v5
- Sass v1
- Prettier v3
Prettier とは
Prettier is an opinionated code formatter
とのこと。
コードの品質を保つもの。スタイルガイドのようなもの。
ESLint に似ているが、 ESLint がサポートしていない記述に関するルールの強制ができる。
例えば、タブ派かスペース派か。
みたいなルールがある。
Prettier を試す
構成
Next.js で試す前に、
適当にサンプルを用意して試す。
- sample
├ .prettierignore
├ .prettierrc.json
├ eslint.config.mjs
├ package.json
└ test.ts
インストール
ESLint と併用する場合、 ESLint と被る項目があるらしいので、
それを ESLint 側で無視させる eslint-config-prettier というプラグインをインストールする。
$ cd /path/to/your/sample
$ npm init
$ npm install --save-dev eslint-config-prettier
$ npm install --save-dev --save-exact prettier
eslint.config.mjs
eslintConfigPrettier は最後に記述するらしい。
import eslint from '@eslint/js'
import tseslint from 'typescript-eslint'
import eslintConfigPrettier from "eslint-config-prettier"
export default tseslint.config(
eslint.configs.recommended,
tseslint.configs.strict,
tseslint.configs.stylistic,
{
rules: {
"@typescript-eslint/no-unused-vars": ["error", {
"args": "all",
"argsIgnorePattern": "^_",
"caughtErrors": "all",
"caughtErrorsIgnorePattern": "^_",
"destructuredArrayIgnorePattern": "^_",
"varsIgnorePattern": "^_",
"ignoreRestSiblings": true,
}],
"@typescript-eslint/consistent-type-definitions": ["error", "type"],
},
},
eslintConfigPrettier,
)
.prettierignore
コードチェックしないものを追加する。
Next.js 環境下だとこんな感じ。だと思う。多分。
.git
.next
node_modules
*.md
.prettierrc.json
- コンフィグファイルについて。
- 設定できる項目はこちら。
- オプションに無い設定は変更できない？ぽい
{
"printWidth": 1000,
"tabWidth": 2,
"useTabs": false,
"semi": false,
"singleQuote": false,
"jsxSingleQuote": false,
"trailingComma": "all",
"bracketSpacing": true,
"bracketSameLine": false,
"arrowParens": "always",
"vueIndentScriptAndStyle": true,
"endOfLine": "lf"
}
test.ts
const bool=true;
const obj = { "test": 'test'
};
function test(v){
console.log("test")
if(v){
console.log("true")
}
const str = (v)
? 'true'
: `false`
}
const test2 = (obj)=>{
console.log(obj)
}
test(bool)
test2({k:v})
switch (bool) {
case true:
break
default:
break
}
試す
直す必要があるかどうか調べる。
$ npx prettier test.ts --check
Checking formatting...
[warn] prettierTest.ts
[warn] Code style issues found in the above file. Run Prettier with --write to fix.
どう整形されるかを出力する。
$ npx prettier test.ts
出力された内容。
const bool = true
const obj = { test: "test" }
function test(v) {
console.log("test")
if (v) {
console.log("true")
}
const str = v ? "true" : `false`
}
const test2 = (obj) => {
console.log(obj)
}
test(bool)
test2({ k: v })
switch (bool) {
case true:
break
default:
break
}
ファイルを書き換える。
$ npx prettier test.ts --write
test.ts 24ms
Next.js にて Prettier の設定をする
インストール
$ cd /path/to/your/project/app
$ npm install --save-dev eslint-config-prettier
$ npm install --save-dev --save-exact prettier
.prettierignore
同上
.prettierrc.json
同上
.eslintrc.json
これも prettier を最後に記述する。
{
"extends": ["next/core-web-vitals", "next/typescript", "prettier"],
"rules": {
"@typescript-eslint/no-unused-vars": [
"error",
{
"args": "all",
"argsIgnorePattern": "^_",
"caughtErrors": "all",
"caughtErrorsIgnorePattern": "^_",
"destructuredArrayIgnorePattern": "^_",
"varsIgnorePattern": "^_",
"ignoreRestSiblings": true
}
],
"@typescript-eslint/consistent-type-definitions": ["error", "type"]
}
}
package.json
コマンドで Prettier を行うようにする。
ファイルの指定方法はこちら。
どういったコマンドにするかはプロジェクト毎に決める。
一旦これで。
{
"scripts": {
"prettier": "npx prettier --write './**/*.{ts,tsx,json,scss}'",
"format:check": "npx prettier --check './**/*.{ts,tsx,json,scss}' && next lint"
}
}
試す
$ npm run prettier
$ npm run format:check