Cacher is the code snippet organizer for pro developers

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"