ICE-5
1/16/2020 - 7:14 PM

vue eslint-prettier-editorconfig

0. Principle

  • Use eslint for code quality.
  • Use prettier for code formatting.
  • Use editorconfig for sharing editor configuration among team.

Order of override: editorconfig > prettier > eslint

1. Install dependencies

  • Global install eslint
npm install -g eslint
  • Install prettier
npm install --save-dev prettier
  • Deactivate all eslint rules that might conflict with prettier
npm install eslint-config-prettier --save-dev
  • Integrate prettier command with eslint
npm install eslint-plugin-prettier --save-dev
  • Add vue parser
npm install --save-dev eslint-plugin-vue

1. eslint

.eslintrc.js

module.exports = exports = {
    "extends": [
        "plugin:vue/recommended",
        "eslint:recommended",
        "prettier",
        "prettier/vue"
    ],
    "env": {
        "es6": true,
        "node": true,
        "browser": true,
        "jquery": true
    },
    "rules": {
        "prettier/prettier": "error"
    },
    "plugins": ["prettier"]
};

  • prettier configuration will override/disable any prior configuration in the extends array.
  • Add prettier in plugins array
  • Setting the newly established prettier rule to error so that any prettier formatting error is considered as an ESLint error.
  • extends order matters, last overrides previous.
  • Do not add rules here, add in .prettierrc.

2. prettier

.prettierrc

{
  "semi": true,
  "singleQuote": false,
  "trailingComma": "none",
  "bracketSpacing": true,
  "jsxBracketSameLine": false
}

3. editorconfig

.editorconfig

[*]

end_of_line = lf
charset = utf-8
indent_style = tab
tab_width = 2
max_line_length = 80

editorconfig overwrites certain attributes in prettier

"endOfLine"
"useTabs"
"tabWidth"
"printWidth"