Regarding the version of ESLint, the current stable version of ESLint is v4.19.1. If you have read the official documentation of ESLint, you will know that the official website has launched ESLint v5.0.0-alpha.1, which is a major version upgrade of ESLint. Since this is a pre-release version, ESLint is not ready for production, so we will not automatically upgrade via npm. The label must be specified when installing next:
"$ npm i eslint @next --save-dev"
This command installs ESLint CLI from the npm repository. If you want to try out the new features of children's shoes, you can install and fiddle.
So why should we use ESLint in our projects? ESLint can verify the code we write, define a specification for the code, and the code in the project must be written according to this specification. Adding ESLint has many benefits, for example, it can help us avoid some very low-level errors, and some formatting problems lead to some unknown errors when we run the production environment. In addition, when collaborating with the team, everyone maintains the same style of code writing, so that when the team looks at each other's code, it can be easier to understand.
So how to use ESLint? First we have to install it:
"$ npm install eslint"
As for whether to install locally or globally, you can see the project requirements. Here, we don't use the official eslint --init to generate our configuration file, we will configure it manually later. Shangxuetang·Baizhan programmer Mr. Chen pointed out that we don’t need to specify the rules ourselves. If you want to see more rules, you can go to the official website to learn about them. Here, we only provide the skills to quickly get started with ESLint in company projects, as well as the problems encountered in actual projects. s solution.
After performing the above steps, we can use the ESLint tool to verify the code in the project.
In the Vue project, the .vue file is written in a format similar to html, not a standard JavaScript file. ESLint cannot directly recognize the JavaScript code in the .vue file. Then we need to install a tool at this time, $ npm i eslint- plugin-html -D, because the JavaScript code written in the vue file is also written in the script tag. The function of this plugin is to identify the JS code in the script tag in a file, which is officially recommended.
Now we can enter $ npm run lint in the terminal to check whether the code in the project conforms to the rules of ESLint.
Generally speaking, when our project did not add ESLint in the early stage, we would run it after adding it in the later stage. Basically, there will be a lot of errors. When we execute the check, there will be a full screen of errors and warnings. How to preprocess errors in the project? eslint-loader to help.
I hope that in the process of project development, every time I modify the code, it can automatically check ESLint. Because we do a check in the process of changing the code, if there is an error, we can quickly locate the problem. Since we just changed it, it is OK to fix it immediately. This avoids the need to run ESLint again when we have to submit a lot of code after changing a lot of code. There may be many places to change and waste our time, because you can't locate this at once. Where is the problem. At the same time, we check every time we change the code, which can also improve the standardization of our code, and let us slowly develop the habit of writing code in a standardized way.