Does Eslint, Prettier, Vetur, EditorConfig — everyone uses VSCode more or less?

introduce

Eslint was originally created as an open source project in June 2013 by Nicholas C. Zakas, senior programmer for JavaScript. Its goal is to provide a plug-in javascript code detection tool.

Prettier is a tool for formatting code that became popular in 2016.

Prettier only cares about formatting; lint does not have the ability to check syntax, for example. It enforces a consistent code presentation format by parsing the code and matching its own set of rules. It has the advantage of beautifying code, and working with ESLint can be a nice complement to ESLint formatting.

Vetur has syntax highlighting, Intellisense, Emmet and more including formatting features.

Alt+Shift+F (formatting full text)

Editorconfig contains a file that defines the code format and a set of editor plug-ins that let the editor read the configuration file and format the code accordingly.

When multiple people work on a project and each uses a different editor, the code style will naturally vary.

The code specification rules configured here take precedence over the editor’s default code formatting rules. If editorConfig is not configured, the editor’s default code formatting rules apply; If editorConfig is configured, follow the set rules.

Editorconfig plug-in

EditorConfigThe extension reads what was created in the first stepeditorconfigFile defined in the rules, and overwriteuser/workspace settings(we can also see from thisvscodeIt is not directly supported by itselfeditorconfig)

use

  • Add in the current project root directory.editorconfigfile
  • The installationEditorConfigextension
  • Global installation or local installationeditorconfigDepend on the package (npm install -g editorconfig | npm install -D editorconfig)
  • Open the file you want to format and manually format the code (Mac OS: Shift + Option + F Windows: Shift + Alt + F)

Currently VSCode does not support all attributes, so you only need to configure the following attributes:

  • indent_style
  • indent_size
  • tab_width
  • End_of_line (when saved)
  • Insert_final_newline (when saved)
  • Trim_trailing_whitespace (when saved)

. Editorconfig configuration

# EditorConfig helps developers define and maintain consistent
# EditorConfig helps developers define and maintain consistency
# coding styles between different editors and IDEs
# Coding styles between different editors and ides
# Open the file that needs formatting and manually format the code (Mac OS: Shift +option+ F Windows: Shift + Alt + F)

# editorconfig.org

# editorConfig Top level configuration file, stop looking up the configuration file
root = true


[*] # change these Settings to your own preference # Change these Settings to your own preference # Indent style = space indent_style = space # indent size =2 indent_size = 2 # We recommend that you keep these unchanged # Newline type = LF end_of_line = LF # character set = UTF-8 charset = UTF-8 # Trim_trailing_whitespace = true # Insert last line = true insert_final_newline = true [*.md]
# Delete line end space = no
trim_trailing_whitespace = false

[package.json]
# Indent style = space
indent_style = space # indentation size =2 indent_size = 2
Copy the code

Prettier plug-in

Prettier has the following advantages:

  • Can be configured to change
  • Support for multiple languages
  • Integrate most editors
  • Concise configuration items

When Prettier is used, code review does not need to talk about code styles, saving time and effort. Here’s a quick example of how it works.

Input

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());
Copy the code

Output

foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne()
);
Copy the code

Use with ESLint

Many projects use ESLint to improve code quality. There are two ways to integrate Prettier and ESLint, and you can use them alone or together. Just use eslint-plugin-prettier to add Prettier as an ESLint rule configuration.

yarn add --dev prettier eslint-plugin-prettier
Copy the code

.eslintrc.json

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

Disable format rules for ESLint

Prettier if ESLint runs Prettier, or if two tools run separately, you probably want each formatting problem to happen only once, and you specifically don’t want ESLint to report “problems” just because it has simple differences and preferences from Prettier.

So you probably want to disable conflicting rules (when preserving rules that other Prettier doesn’t care about) by using eslint-config-prettier. It can be added to any ESLint configuration.

yarn add --dev eslint-config-prettier
Copy the code

.eslintrc.json

{
  "extends": ["prettier"]}Copy the code

For the configuration of prettier, see here: prettier

Vetur plug-in

After installation, edit in settings.json:

Paste the following configuration:

"vetur.format.defaultFormatter.js": "vscode-typescript"."eslint.validate": [
    "javascript"."javascriptreact",
    {
        "language": "vue"."autoFix": true}]."eslint.autoFixOnSave": true
Copy the code

As shown below:

Eslint

ESLint code checking is a static analysis, often used to look for problematic patterns or code, and is not dependent on specific coding styles. Most programming languages have code checks, and compilers typically have built-in checks.

JavaScript is a dynamic, weakly typed language that is prone to error in development. Because there is no compiler, it is often necessary to debug during execution to find JavaScript code errors. Things like ESLint allow programmers to find problems while coding rather than during execution.

ESLintFunctions and advantages:

  • Check for syntax errors and avoid low-level errorsbug;

For example: API syntax errors, using undefined variables, changing const variables

  • Unified team code style

For example, use TAB or space, single or double quotation marks, and so on

  • Make sure your code follows best practices

For example, you can extend the style guide to popular best practices in the community with the eslint-config-standard configuration package.

Supported configuration file formats

ESLint supports configuration files in several formats:

  • JavaScript– use.eslintrc.jsIt then outputs a configuration object.
  • YAML– use.eslintrc.yaml 或 .eslintrc.ymlTo define the configuration structure.
  • JSON– use.eslintrc.jsonTo define the structure of the configuration,ESLint 的 JSONFile to allowJavaScriptStyle notes.
  • (deprecated) – use.eslintrc, you can makeJSONIt can also be YAML.
  • package.json– inpackage.jsonCreate aeslintConfigProperty, where you define your configuration.

If there are multiple configuration files in the same directory, ESLint will only use one. The priorities are as follows:

  1. .eslintrc.js
  2. .eslintrc.yaml
  3. .eslintrc.yml
  4. .eslintrc.json
  5. .eslintrc
  6. package.json

In the case of multiple cascading configurations within a project, the proximity principle is still used as a high priority.

See instructions on ESLint’s official website for more configurations

Summary:

  • ESLint: code quality inspection, code style constraint, etc.
  • Prettier: focus on code formatting tools, beautify code;
  • Vetur: Syntax highlighting is usually used;
  • EditorConfig: Write code across editors and IDES with a consistent simple coding style;