【Vue.js】 ESLint and Prettier’s settings

programming

Required

  • eslint (reports code that doesn’t follow the rules you set)
  • prettier (code formater)
  • eslint-config-prettier (turns off rules that may conflict with Prettier)
  • eslint-loader (detects code that does not follow the rules without executing commands. I need to set it up later)
  • eslint-plugin-prettier (include rules set in ESlint into Prettier)
  • eslint-plugin-vue (vue file parser)
  • babel-eslint

Install required modules command one-liner

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

Extensions

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.

Contents of various configuration files

.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をコピーしました