概要

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で書いて保存してみる

書いているときにフォーマット違反があったらエラーを出す&保存時に自動フォーマットしてくれるはず