5分でVueプロジェクトにESlintとPrettierを適用する方法

はじめに

コードフォーマッタやリンターを導入することによってコードを綺麗に保つことができ、ある程度雑に書いてもセーブ時に自動で直してくれます。 またチーム開発なら属人性を消すことができます。 ストレスフリーな状態でコードロジックに集中できるのでぜひ試してみてください。

環境

• VSCode 1.30.2
  • 拡張機能
  • Vetur 0.14.5
  • ESlint 1.8.0
  • Prrettier 1.7.3
• Vue 2.5.21
• ESlint 5.11.0
• Prettier 1.15.3

VSCode拡張機能

VSCodeでvueファイルのフォーマットやシンタックスハイライトをしてくれるVetur, それぞれ設定をするのに必要なESlint, Prettierをダウンロードしてください。

node_module導入

ここではすでにVueプロジェクトが出来上がっている前提で話をはじめます。 新規に作る方はvue-cliで適宜作ってください。

$ yarn add  --dev eslint eslint-config-prittier eslint-plugin-prettier eslint-plugin-vue prettier

設定

最低限の設定をします。

.eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/recommended',
    'plugin:prettier/recommended'
  ],
  plugins: ['vue'],
  rules: {
    'prettier/prettier': [
      'error',
      {
        singleQuote: true,
        semi: false,
        indent: ['error', 2]
      }
    ]
  }
}

.prettierrc.js

module.exports = {
  indent: 2,
  semi: false,
  singleQuote: true
}

あとはエディタの拡張機能設定を以下のようにすればJaveScriptの保存時に自動でフォーマットされます。

setting.json

"eslint.autoFixOnSave": true,
"prettier.eslintIntegration": true,
"eslint.run": "onSave",
"eslint.validate": [
    "javascript",
　　"javascriptreact",
　　{
    "language": "vue",
    "autoFix": true
　　}
],
"vetur.format.defaultFormatter.html": "none",
"editor.formatOnSave": true,