概要
VSCodeで、Vue + ESLint + Prettierを導入し、vueファイルやjsファイルの保存時に、自動的にフォーマットがかかるような環境を整えようとしたが、ちゃんと動くまでに時間がかかったのでメモしておく。
試した環境
- macOS Catalina (10.15.7)
- VSCode (1.52.1)
手順
1. Vueプロジェクトの作成
- vue cliをインストール
npm install -g @vue/cli
- プロジェクト作成(途中でvue 2か3かを聞かれるが、2にしておく。)
vue create (プロジェクト名)
2. ESlint, Prettier関連の設定
(https://www.npmjs.com/package/eslint-plugin-prettier-vue を参考にしたら比較的簡単にいった。)
-
上で作成したプロジェクトのルートディレクトリで、以下を実行
yarn add -D eslint-plugin-prettier-vue eslint-plugin-vue eslint-config-prettier eslint prettier
プロジェクト作成時に自動で作成された、ルートディレクトリにある
.eslintrc.js
を、以下のものに置き換える。なお、rulesのセクションで、色々とセミコロンとかクォーテーションの設定等をしているが、ここは好みのものにする。
.eslintrc.js
module.exports = {
extends: ['plugin:vue/recommended', 'plugin:prettier-vue/recommended', 'prettier/vue'],
settings: {
'prettier-vue': {
SFCBlocks: {
template: true,
script: true,
style: true,
customBlocks: {
docs: { lang: 'markdown' },
config: { lang: 'json' },
module: { lang: 'js' },
comments: false,
},
},
usePrettierrc: true,
fileInfoOptions: {
withNodeModules: false,
},
},
},
rules: {
'prettier-vue/prettier': [
'error',
{
printWidth: 100,
singleQuote: true,
semi: false,
trailingComma: 'es5',
},
],
},
}
- 以下のような
.prettierrc.js
をプロジェクトのルートディレクトリに作成。このファイルに書く設定は、.eslintrc.js
の、rulesのセクションに書いたものと必ず合わせる。
.prettierrc.js
module.exports = {
printWidth: 100,
singleQuote: true,
semi: false,
trailingComma: 'es5',
}
- プロジェクトの作成時に自動で作成された、
package.json
内のeslintConfig
セクションは、不要と思われるので削除しておく。
3. VSCodeの準備
-
以下のextensionを導入する。(Veturは入れない)
- ESlint
- Prettier
- vue
ファイル保存時に自動的にprettierでフォーマットしてくれるように、プロジェクトのルートディレクトリに
.vscode
ディレクトリを作成し、その配下に、以下のようなsettings.json
を作成。
.vscode/settings.json
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
}
- VSCodeを再起動する。
4. 適当にjsファイルかvueファイルをVSCodeで書いて保存してみる
- 書いているときにフォーマット違反があったらエラーを出す&保存時に自動フォーマットしてくれるはず