挨拶
Web系エンジニアへの就職に向け学習をしております、ひろやすと申します。
今回の記事は、VSCodeでファイル保存時に保存されたファイルの自動整形を行う方法について調べたので、学習のアウトプットとして投稿しようと思います。
前提条件
今回は、Nuxtプロジェクトの自動フォーマットに絞って解説したいと思います。
◆プロジェクトのバージョン
・Nuxt.js（2.15.7）
・ESlint（7.29.0）
・Prettier（2.3.2）
create-nuxt-appでESlintとPrettierを選択したため、.eslintrc.js(ESlintの設定ファイル)や.prettierrc(Prettierの設定ファイル)が自動で作成されています。
.eslintrc.js
module.exports = {
root: true,
env: {
browser: true,
node: true
},
parserOptions: {
parser: '@babel/eslint-parser',
requireConfigFile: false
},
extends: [
'@nuxtjs',
'plugin:nuxt/recommended',
'prettier' // Prettierとの競合を防ぐため
],
plugins: [
],
// add your custom rules here
rules: {
'no-console': 'off', // console.log()の使用を許可する
'semi': ['error', 'never'] // 文末にセミコロンを付けない
}
}
prettierrc
{
"semi": false, // 文末にセミコロンを付けない
"singleQuote": true // シングルクォートを使用
}
VSCodeに拡張機能を追加
今回は、VSCodeの拡張機能であるESlintとPrettier-Codeformatterをインストールします。
VSCodeのsetting.jsonを編集
ファイル保存時に自動フォーマットするように設定。
setting.json
"editor.formatOnSave": true
ファイル保存時にESlintが、対応するファイルをフォーマットする。
setting.json
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
デフォルトのフォーマッターにPrettierを設定。
setting.json
"editor.defaultFormatter": "esbenp.prettier-vscode"
VSCodeの拡張機能のVeturを使用している場合は
VeturとESlintの競合を防ぐために下記のコードも追記してください。
setting.json
"vetur.validation.template": false
以上の設定をすることでファイルの保存時に自動フォーマットが実行されると思います。
このやり方が正解というわけではなく、一つの例に過ぎないと思います。
もし、もっと良い実装の仕方や間違っている部分がありましたらご指摘いただけたら幸いです。
最後までお読み頂きましてありがとうございます。