Let’s be honest: Whether it’s Python pyCharm or JS webstrom feels like the best development tool out there! Webstorm supports the Eslint rule and prettier plugin for formatting, Ctrl+Alt+L, while Webstorm supports the Eslint rule and prettier plugin for formatting, Ctrl+Alt+L

 

Special note: The EditorConfig configuration file is critical, especially for indentation, and its Settings must be saved in accordance with esLint!

 

Eslint core parameter configuration in Chinese:Eslint. Cn/docs/user – g…

The most core ESLint rule configuration (js syntax) :eslint.cn/docs/rules/

npm install --dev eslint-plugin-vueCopy the code

Support the vue rules official documentation: https://eslint.vuejs.org/rules/

 

Specific operation outline

  1. Unified development tools used by the team (Webstorm, IDE editor)
  2. Install ESLint and Prettier (node module) —- Vue3 GUI installs automatically!
  3. Install prettier (plug-in for IDE editor) -Webstorm automatically installs prettier (it’s easier for ESLint to use Webstorm, not recommended)
  4. Configure esLint and prettier
  5. Configure EditorConfig (it is important here, especially to keep indentation consistent with ESLint)
  6. Strict oversight, checking and formatting code according to procedures, submitting code according to specifications and requirements.

 

Json file configuration rules: Refer to the official ESlint documentation for more rules

 

{"name": "vue_solidITY_truFFLE_2019 ", "version": "0.1.0", "private": true, "scripts": {"serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "test:e2e": "vue-cli-service test:e2e", "test:unit": "vue-cli-service test:unit" }, "dependencies": { "register-service-worker": "^ 1.5.2", "vue" : "^ 2.6.6", "vue - the router" : "^ 3.0.1", "vuex" : "^ 3.0.1"}, "devDependencies" : {" @ vue/cli - plugin - Babel ": "^ 3.4.0 @", "vue/cli - plugin - e2e - nightwatch" : "^ 3.4.0", "@ vue/cli - plugin - eslint" : "^ 3.4.0", "@ vue/cli - plugin - pwa" : "^ 3.4.0 @", "vue/cli - plugin - unit - mocha" : "^ 3.4.0", "@ vue/cli - service" : "^ 3.4.0", "@ vue/eslint - config - standard" : "^ 4.0.0 @", "vue/test - utils" : "^ 1.0.0 - beta. 20", "Babel - eslint" : "^ 10.0.1", "chai" : "^ 4.1.2", "eslint" : "^ 5.8.0 eslint - plugin -", "vue" : "^ 5.0.0", "fibers" : "^ 3.1.1 track", "lint - staged" : "^ 8.1.0", "sass" : "^ 1.16.0", "sass - loader" : "^ 7.1.0 vue - the template -", "compiler" : "^ 2.5.21"}, "postcss" : {" plugins ": {" autoprefixer" : {}}}, "browserslist" : [ "> 1%", "last 2 versions", "not ie <= 8" ], "gitHooks": { "pre-commit": "lint-staged" }, "lint-staged": { "*.js": [ "vue-cli-service lint", "git add" ], "*.vue": [ "vue-cli-service lint", "git add" ] }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "@vue/standard" ], "rules": { "generator-star-spacing": "off", "no-unexpected-multiline": "off", "no-debugger": "off", "no-console": "off", "no-unused-vars": "warn", "no-mixed-spaces-and-tabs": [ "warn", "smart-tabs" ], "semi": [ "warn", "always" ], "indent": [ "warn", 4 ], "array-bracket-spacing": [ "warn", "always" ], "space-in-parens": [ "warn", "always" ], "brace-style": [ "warn", "1tbs" ], "no-multiple-empty-lines": [ "warn", { "max": 2 } ], "object-curly-spacing": [ "warn", "always" ], "object-curly-newline": [ "warn", { "ImportDeclaration": { "multiline": true } } ], "vue/html-indent": [ "warn", 4 ], "vue/attribute-hyphenation": "error", "vue/no-unused-components": "warn", "vue/require-prop-types": "off" } } }Copy the code