Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use ESLint in a project". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use ESLint in a project".

Why lint JavaScript?

Well-run projects have clear and consistent coding conventions and automatic execution. When I review a project, its code looks like a house built by a child with an axe and a picture of the house, and it doesn't inspire confidence in the code's functionality.

The absence of a coding convention is also an obstacle to attracting contributions. Relying on a project that does not welcome contributions is a risk in itself.

In addition to checking styles, linter is also an excellent tool for finding certain types of errors, such as errors related to the scope of variables. Assigning to undeclared variables (which leak to the global scope, pollute it, and can cause errors to be difficult to find) and using undefined variables are examples of errors that can be detected in lint.

How to configure ESLint

ESLint is the primary tool for linting Node.js packages and can be configured to enforce multiple coding styles. You can define your own style definitions, but here I'll show you how to use StrongLoop styles. There are others, but the style of StrongLoop is mediocre (good things, coding styles should not be noticed), similar to those used in many open source Node.js projects.

Install and save package dependencies: npm install-- save-dev eslint eslint-config-strongloop.

Configure echo'{"extends": "strongloop"}'> .eslintrc.json using StrongLoop by running the settings ESLint.

Make sure you have a .gitignore file (so derived files will not be linted, only the original source files). If you don't, you can create one with minimal effort: echo node_modules/ > > .gitignore. Note that you can also use the ESLint-specific .eslintignore file, which has the same syntax as .gitignore and may have the same content. To avoid this maintenance burden, most projects only use .gitignore.

Using this setting, configure ESLint to run automatically before testing by changing package.json to a pretest script. It should look something like:

{... "scripts": {"pretest": "eslint-- ignore-path .gitignore."}.}

The exact content of package.json depends on your project. You must add a preview script to make ESLint run before your unit test. When you use npm to run test scripts, it also runs pretest and posttest scripts (if any). I like this better because eslint usually runs much faster than my tests, and lint bugs are easy to fix, but some people prefer to run the entire test suite before linter, in which case, use posttest.

Submit ESLint Automation support:

Git add package.json .gitignore .eslintrc.json git commit-m'Add eslint automation

When finished, run

Linter: npm run pretest

If your console is full of errors, don't be discouraged!

How to clean up existing code

One reason people avoid using ESLint is that cleaning up code that has never been lint feels like cleaning Augean stables. I suggest doing what Hercules does: get help from the tools.

ESLint can automatically fix many syntax problems. This should be the first tool you use to clean up the source code:. / node_modules/.bin/eslint-- fix-- ignore-path. Gitignore.

If you have an ESLint pilot script, you can also do the following: npm run pretest-fix

There are some class problems that ESLint won't solve, however, in this case, you can use it to clean up prettier at once. Prettier is most commonly used as a replacement for ESLint and auto-formats sources prior to submission. It is also very useful when booting ESLint. Run it like this:

Npm i prettier. / node_modules/.bin/prettier-- single-quote-- trailing-comma es5-- print-width 80-- write-- no-bracket-spacing * / * .js

After running eslint-fixand after prettier, you should have only a few remaining warnings to clean up manually. Although prettier is not as common as ESLint, it can be used as a supplement to ESLint if needed (prettier for automatic formatting and ESLint for format enforcement and error checking). If for some reason you don't have time to fix these problems now, disable the ESLint rule. Automatically enforcing some subsets of styles is much better than not enforcing them at all. You can override some StrongLoop styles for specific projects, and then have time to come back and clean up the code.

This is an example of relaxing max-len rules to allow contiguous lines up to 120 characters wide:

{"extends": "strongloop", "rules": {"max-len": [2120,8]}}

You may find that your code uses a consistent style, but not the StrongLoop style. If close, you can customize the StrongLoop style and publish it as your own. If your style is completely different, it may make sense to write and publish your own reusable configuration.

Once your code is clean (using npm run pretest checking), submit the results:

Git commit-a-m'Project lints clean automatic lint

There are two levels of automation: project-wide policies and your own personal settings.

As far as project-wide policies are concerned, there is nothing to do because ESLint is configured to run with your tests. Unless you don't run tests automatically for your project, in this case it's time to start!

In terms of my own personal settings, I prefer to run ESLint on each of my submissions, so any problems I introduce are caught before CI is captured on my machine. I use a git pre-commithook to do this.

To set up, use the sample hook as the basis:

Cp. Git/hooks/pre-commit.sample. Git/hooks/pre-commit

The last few lines of the file will look like this:

# If there are whitespace errors, print the offending file names and fail.exec git diff-index-check-cached $against--

Change it to look like this:

Set-enpm run pretest# If there are whitespace errors, print the offending file names and fail.exec git diff-index-check-cached $against--

That's it. You're another user of eslint now.

Thank you for your reading, the above is the content of "how to use ESLint in the project", after the study of this article, I believe you have a deeper understanding of how to use ESLint in the project, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.