editorconfig
EditorConfigは、複数の開発者が同じプロジェクトを異なるIDEで編集する際のコーディングスタイルの一貫性を保つことを目的としたツールです。
-
プラグインのインストール：EditorConfig for VS Code
-
プロジェクトのルートディレクトリに
.editorconfigという名前のファイルを作成し、以下の内容を記述します。
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
max_line_length = off
trim_trailing_whitespace = false
prettier
PrettierはJavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdownなど多くの言語に対応したコードフォーマッタであり、フロントエンドの開発において広く使われています。
- Prettierのインストール
npm install prettier -D
.prettierrc.jsonファイルの作成：
- useTabs：タブを使用するかスペースを使用するか、falseを指定。
- tabWidth：スペースによるインデントの場合の幅、2を指定。
- printWidth：1行あたりの最大文字数、推奨値は80。
- singleQuote：シングルクォートまたはダブルクォートを使用、trueでシングルクォート。
- trailingComma：複数行での末尾カンマの追加、noneを指定。
- semi：セミコロンの有無、falseで不要。
{
"useTabs": false,
"tabWidth": 2,
"printWidth": 80,
"singleQuote": true,
"trailingComma": "none",
"semi": false
}
.prettierignoreファイルの作成
/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*
-
VSCodeにPrettierプラグインをインストール
-
VSCodeの設定
- 設定 → "フォーマット時に保存" → チェック
- 設定 → "エディタのデフォルトフォーマッタ" → Prettierを選択
これらの手順が完了すると、コードを保存（Ctrl+S）することで自動的にフォーマットが適用されます。
- 一度にすべてのファイルをフォーマットするためのスクリプトを
package.jsonに追加：
"prettier": "prettier --write ."
このコマンドにより、プロジェクト全体のコードを一括で整形できます。
npm run prettier
ESLint
ESLintはコードの品質と規則を維持するために使用されます。
-
同様にプラグインをインストール
-
.eslintrc.jsファイルの設定
require('@rushstack/eslint-patch/modern-module-resolution')
module.exports = {
root: true,
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/eslint-config-typescript',
'@vue/eslint-config-prettier',
'plugin:prettier/recommended'
],
parserOptions: {
ecmaVersion: 'latest'
},
rules: {
'vue/multi-word-component-names': 'off'
}
}
ESLintとPrettierの設定が競合する場合があります。その解決策として、以下のパッケージをインストールします。
npm install eslint-plugin-prettier eslint-config-prettier -D
通常、Vueプロジェクト作成時にPrettierを選択した場合、これらのプラグインは自動的にインストールされます。
ESLintのextends項目に'plugin:prettier/recommended'を追加してください。