preface

The dynamic language type of JavaScript gives it its unique charm, resulting in a variety of development paradigms, but also some problems, from the common error of undefined and null at runtime, to the arbitrary addition and subtraction of semicolons, line breaks, and Spaces in code, resulting in visual confusion. If it is team development, This situation becomes even more serious and must be constrained, as described below are vUe-based code rigor patterns and programming specifications.


Core plugin: Eslint + Standard

What is Eslint?

ESLint was originally an open source project created by Nicholas C. Zakas in June 2013. Its goal is to provide a plug-in javascript code detection tool. Similar projects are JSLint and JSHint.


Using ESLint ensures code consistency and avoids errors. Here’s how to use ESLint.

ESLint installation and configuration

Vue – CLI3 initialization introduces ESLint
If vuE-CLI3 is used to initialize the construction project, you can execute the Vue UI in the command line to open the new graphical interface of VUe-cli3 to create and manage the project; Babel + ESLint is configured by default. You can also manually configure projects to introduce more features such as Router, VUex, SCSS, typescript, Unit tests, and E2E tests.


If you are late to introduce ESLint, you will need to manually install several ESLint-related plug-ins as shown in the figure below, with the installation instruction 
vue add @vue/eslintCopy the code

Tip: Vue Add is designed to install and invoke the Vue CLI plug-in. For normal NPM packages, this does not mean there is a substitute. For these generic NPM packages, you still need to use the package manager (depending on the NPM package of your choice).



Vue Add@esLint will execute the install and call commands in sequence and intelligently generate the required configuration file, which may modify the current file contents of the project. Therefore, before running vue add, you need to save the current state of the submitted project. The nice thing about vue Add is that you can call the Vue CLI plug-in. For example, IF I just execute the vue add@vue/ESLint directive, following the command line prompts will help you match all the remaining ESLint configurations instead of having to install them one by one.


After the installation, you can find an.eslintrc.js file in the root directory. This is the configuration file of ESLint, which can configure custom rules, etc.


Introduction of ESLint for generic projects
If the project is not based on vuE-cli3 or VUE, you need to install ESLint in the NPM package manager and then run the eslint –init command in the./node_modules/.bin/ directory to generate the required ESLint configuration scheme according to the instructions. This can be applied to vUE or other projects such as react. 
NPM install eslint --save-dev // installs and saves to the project development dependency./node_modules/. Bin /eslint -- --init // initialization commandCopy the code



After installation, you can configure the Lint command in the script of package.json to perform ESLint validation. 
"lint": "vue-cli-service lint"/ / based on vue - cli3"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"/ / the vue - cli3Copy the code

Installation and use of code specification Standard

After using ESLint, you usually have to configure a lot of rules yourself. This is a hobby, and most people don’t want to spend too much effort on it (like manually configuring hundreds of ESLint rules), so there are some open source code specification libraries on Github. Airbnb, Standard, Prettier, etc., are popular


Use in VUE:

In vUE, it is usually used with ESLint. If you noticed that ESLint initialization directives have an option to select the open source code specification, the standard option is available by default.



Q&A

ESLint + Standard is configured but does not take effect?
Find the.eslintrc.js file in the project root directory and note whether the extends and plugins properties are configured. The extends in the figure below indicates that ESLint inherits the standard coding specification.


Js file is valid, but.vue file is not.
To verify.vue files, check whether your package.json has eslint-plugin-html installed and.eslintrc.js configured with plugins.


If vscode editor is used for development, install the vscode plug-ins ESLint and Vetur, add the following configuration to the Settings = “settings.json” file, and restart VScode to take effect. 
"files.associations": {
    "*.vue": "vue"
},
"eslint.autoFixOnSave": true."eslint.validate": [
    "javascript"."javascriptreact",
    {
        "language": "vue"."autoFix": true
    },"html"."vue"
]Copy the code



3. Can I customize rules after standard is configured?
Standard itself disapproves of this. If you must use Standard and need to customize some of its rules, you need to use eslint-config-standard. Of course, in the configuration we installed with the esLint init directive above, It is in this form that standard is used.


conclusion

This paper introduces several open source schemes for front-end coding specifications and code quality management, builds a VUe-based ESLint + Standard scheme, and records the problems that may be encountered in actual use.



Refer to the link

1. Configure ESLint to detect Vue single files in VSCode