Vue.jsプロジェクトのESLint、Prettier設定

プログラミング

必要なモジュール

  • eslint(設定したルールに沿わないコードを報告します)
  • prettier(コードフォーマッタ)
  • eslint-config-prettier(Prettierと競合する可能性があるルールをoffにする)
  • eslint-loader(コマンド実行せずにルールに沿わないコードを検知。あとで設定が必要)
  • eslint-plugin-prettier (ESlintで設定したルールをPrettierに取り込む)
  • eslint-plugin-vue(Vueファイルのパーサー)
  • babel-eslint

必要なモジュールのインストールコマンド ワンライナー

npm i -D babel-eslint eslint eslint-config-prettier eslint-loader eslint-plugin-prettier eslint-plugin-vue prettier

拡張機能

Vetur - Visual Studio Marketplace
Extension for Visual Studio Code - Vue tooling for VS Code
ESLint - Visual Studio Marketplace
Extension for Visual Studio Code - Integrates ESLint JavaScript into VS Code.

各種設定ファイルの内容

.eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  extends: [
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/essential',
    'prettier'
  ],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  // add your custom rules here
  rules: {
    "semi": [2, "never"],
    "no-console": "off",
    "vue/max-attributes-per-line": "off",
    "vue/html-self-closing": ["error", {
      "html": {
        "void": "always",
      }
    }],
  }
}

.vscode/settings.json

"eslint.autoFixOnSave": true,
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

タイトルとURLをコピーしました