ESLint and Prettier are used in Vue projects

Good code specification is important for both individuals and teams. Following a consistent code specification can significantly improve code readability, maintainability, clean structure, and bug reduction. For team development, it also reduces some of the communication costs and allows everyone to focus on feature development.

I gradually came into contact with code specification inspection tools ESLint and Prettier during front-end development, but they were generally known before and had not been thoroughly studied or configured. Therefore, in order not to let oneself have been in a state of ignorance, take this opportunity to summarize the learning content of these two days for quick follow-up retrieval.

Prettier profile

Prettier is a code formatting tool used to unify code style and improve code maintainability.

It is generally accepted that having a common style guide is valuable to the project and the team

Why Prettier is used

  1. Building and enforcing a style guide

    Prettier is the only completely automatic “style guide”. Even though Prettier can’t format 100% of the code you want, it’s worth the sacrifice considering Prettier’s unique advantages,

  2. Helping Newcomers

    It helps people get used to new code, both new and experienced

  3. Writing code

    Programmers put more effort and attention on writing high-quality code than on formatting

  4. Easy to adopt

    Easy to use and low cost to learn

  5. Clean up an existing codebase

    Unify the code style of the existing code base

  6. Ride the hype train

    The big boys use it. You use it you’re a big boy

Prettier was invented to settle programmers’ debate about which code style Prettier is optimal.

By far the biggest reason for adopting Prettier is to stop all the ongoing debates over styles.

“Use mine, stop arguing, and write quality code when you have time. “

Prettier, therefore, is limited in configuration; it is an opinionated tool that translates as opinionated and therefore restricted, not left to the user.

Prettier for fomatting, in short

ESLintIntroduction to the

ESLint is an open source JavaScript code checking tool created by Nicholas C. Zakas in June 2013. Code review is a static analysis that is often used to find problematic patterns or code and is not dependent on specific coding styles.

The original purpose of ESLint was to allow programmers to create their own detection rules. All rules in ESLint are designed to be pluggable. ESLint’s default rules are no different from other plugins, and the rules themselves and tests can rely on the same schema. ESLint has some rules built in to make it easier for people to use, although you can customize the rules as you go along.

ESLint provides two types of rules, namely, Code Formatting rules and code-quality rules.

ESLint characteristics

All are pluggable

  • Built-in rules and custom rules share a set of rules apis
  • The built-in formatting methods and custom formatting methods share a set of formatting apis
  • Additional rules and formatting methods can be specified at run time
  • The rules and corresponding formatting methods are not mandatory for bundling

Each rule:

  • independently
  • Can be turned on or off (nothing can be considered “too important to turn off”)
  • The result can be set to warning or error

In addition:

  • ESLintNo coding style is recommended; the rules are arbitrary
  • All built-in rules are generalized

Project:

  • Reduce communication costs through rich documentation
  • Make it as simple and transparent as possible
  • Believe in the importance of testing

ESLint configuration

There are many configuration items for ESLint. Here are some of the most common ones

"ParserOptions" : ESLint allows you to specify JavaScript language options that you want to support. By default, ESLint supports ECMAScript 5 syntax. You can override this setting to enable support for other versions of ECMAScript and JSX. "Parser" : ESLint uses Espree as its parser by default. You can specify a different parser" env" in your configuration file: an environment defines a set of predefined global variables "globals" : If you want to use global variables in a source file, it is recommended that you define these global variables in ESLint so that ESLint does not issue warnings. "Rules" : ESLint has a large number of rules attached to it. You can use comments or configuration files to modify the rule "extends" that you want to use in your project: The configuration file extends the set of rules enabled from the base configuration. There are four typesCopy the code

ESLint is used in conjunction with Prettier

As I said above,ESLintHas its own code formatting function, why use itPrettier?

Prettier Prettier code structure, ESLint to check code quality, What kind of spark does a combination of strong and strong produce?

One way to combine ESLint and Prettier is to use Prettier as an ESLint plug-in. Here’s how to install and configure Prettier.

  1. The installation

To use ESLint and Prettier, you have to install them, and then you need to install eslint-plugin-prettier.

To prevent Prettier from colliding with ESLint formatting, install eslint-config-Prettier to disable code formatting in ESLint

npm install --save-dev --save-exact prettier npm install eslint --save-dev npm install --save-dev eslint-plugin-prettier  npm install --save-dev eslint-config-prettierCopy the code

You can add files or folders that do not need formatting to.prettierignore and.eslintignore files and ignore them when beautifying code to pick bugs.

  1. configuration

In general, creating the ESLint configuration file.eslintrc.json in the project root directory would suffice, but you can also create an eslintConfig property in package.json to define your configuration there. In addition, configuration files have a cascading structure. For details, see the official website.

Here’s a look at the configuration file for adding the Prettier plug-in in ESLint:

{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}
Copy the code

GitHub of eslint-plugin-prettier gives a recommended configuration:

{
  "extends": ["plugin:prettier/recommended"]
}
Copy the code

This is equivalent to the following configuration:

{"extends": ["prettier"], // eslint-config-prettier needs to be placed last to override other rules "plugins": ["prettier"], // eslint-plugin-prettier "rules": {"prettier/prettier": "error", "arrow-body-style": "off", "prefer-arrow-callback": "off" } }Copy the code
  • "extends": ["prettier"] enables the main config from eslint-config-prettier, which turns off some ESLint core rules that conflict with Prettier.
  • "plugins": ["prettier"] registers this plugin.
  • "prettier/prettier": "error" turns on the rule provided by this plugin, which runs prettier from within ESLint.
  • "arrow-body-style": "off" and "prefer-arrow-callback": "off"turns off two ESLint core rules that unfortunately are problematic with this plugin.

Prettier is usually configured by creating the. Prettierrc file in the root directory where Prettier can be configured:

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}
Copy the code

Further configuration

ESLint configuration eslint.bootcss.com/docs/user-g…

Prettier configuration pretter. IO/docs/en/opt…

VSCode configurationESLint Prettier

To use ESLint and Prettier in VSCode, you need to install plug-ins.

ESLint

Prettier

It needs to be configured in setting.json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
  "editor.codeActionsOnSave": {
        "source.fixAll": true
        ("source.fixAll.`ESLint`": true)
    }
}
Copy the code

Code specification

AirBnbCode Specification (Chinese version)

GoogleCode specification

References:

ESLint website eslint.bootcss.com/

Prettier website Prettier. IO /

Eslint plugin – prettier github.com/prettier/es…

Eslint plugin – prettier github.com/prettier/es…

ESLint, Prettier, EditorConfig juejin.cn/post/689588…

Prettier have to do is look at this article zhuanlan.zhihu.com/p/81764012?…

Comparison of ESLint formatting Prettier and Standard rules in Vue3 blog.csdn.net/qq_21567385…

Parser: ‘babel-eslint ‘, for ESLint