🎃

Vue2 + ESLint + Prettierの設定

2022/06/12に公開

VS Code

ESLint

Prettier

tech

ESLintの設定

vue/cli で新規作成する際に、『ESLint + Prettier』を選択すると、
eslintrc.jsファイルが作られ、下記設定が自動で書き込まれます。

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/essential",
    "eslint:recommended",
    "plugin:prettier/recommended",
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  },
};

package.jsonを見ると、関連ライブラリがインストールされていることが分かります。

Prettierの設定

「文末のセミコロンを消したい」などコードのフォーマットに関する設定は.prettierrcファイルで定義可能です。

以下は例です。

.prettierrc

{
  "semi": false,
  "arrowParens": "always",
  "endOfLine": "lf",
  "useTabs": false
}

こちらのサイトでオプションについて詳しく説明されています！

割とデフォルトのままいけるものも多かったです。

prettier設定（コメント残したい場合）

設定ファイル名を「prettier.config.js」とすれば、コメントを残すことも出来ます。

prettier.config.js

//各項目の説明：https://qiita.com/takeshisakuma/items/bbb2cd2f1c65de70e363
module.exports = {
  printWidth: 80, //デフォルト
  semi: false, 
  singleQuote: false, //デフォルト
  tabWidth: 2, //デフォルト
  arrowParens: "always",//デフォルト
  endOfLine: "lf", //デフォルト
  useTabs: false, //デフォルト
  quoteProps: "as-needed", //デフォルト
  jsxSingleQuote: false, //デフォルト
  trailingComma: "es5", //デフォルト
  bracketSpacing: true, //デフォルト
  jsxBracketSameLine: false, //デフォルト
}

デフォルト設定は特に書く必要はありませんが、
メモ目的で書いています。

prettier設定（.vscode/setting.jsonに書く方法：おススメしない）

結論から先に書くと、prettierの設定は、.prettierrcに書いた方がいいです。
（設定ファイルを区別することで、分かりやすくなるメリットもあります。）

vscode設定（crtl + ,)ファイルで、prettierの設定を変更すると、
.vscode/settings.jsonに以下のように設定が追加されます。

例えば文末にsemicolonを使用しない設定にすると、
.vscode/settings.jsonに『"prettier.semi": false』が追加されます。

settings.json

{
  "editor.tabSize": 2,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "prettier.semi": false //追加される
}

sample.js

import HelloWorld from "../components/HelloWorld";

この状態で、npm run serveすると、不要なセミコロンを検知しエラーが表示されます。
しかし、なぜかファイル保存時にセミコロンを取り除いてくれません。

.prettierrcに書いた設定は、ファイル保存時に自動で修正してくれていました。

なので結論としては、prettier設定ファイル（.prettierrc）に書き込んだ方がいいです。

大変勉強させて頂きましたー！