Vetur + Eslint + Prettier

The use of Vetur

Vetur introduction

Vetur is a Vue tool for vscode, supported by vue-language-server.

Characteristics of the

  • Syntax highlighting
  • Snippet
  • Emmet
  • Linting/Error Checking
  • Formatting
  • IntelliSense
  • Debugging
  • Framework Support
  • Interpolation Support
  • VTI

This time the main content is only about verification and formatting, the rest of the content can be read in the official documentation.

Linting/Error Checking

Vetur provides error checking and validation.

Error Checking

Vetur checks for errors in the following languages:

  • <template>:html
  • <style>:css,scss,less
  • <script>:js,ts

Validation.[template/style/script] optionally disables error checking.

Linting

To use this feature, you need to install the Eslint plugin in vscode (note: it is not imported from the node package of Eslint, notably the tilde under the problematic code). Vetur does not support rule configuration for

After installing the Eslint plugin, add **vue to vscode’s eslint.validate** configuration:

{
  "eslint.validate": [
    "javascript"."javascriptreact"."vue"]}Copy the code

When configured correctly: Eslint can validate the contents of

Linting for <template>

For validation of

Linting is not configurable and is based on a fixed version of eslint-plugin-vue, if you want to customize Linting for

Need to:

  • Through vetur. Valition. Template: false close vetur template Linting.
  • Make sure vscode has the Eslint plugin installed. Error checking comes from the Eslint plugin, not from Vetur.
  • In project executionyarn add -D eslint eslint-plugin-vue.
  • Configure **.eslintrc** in the project root directory. Such as:
{
  "extends": [
    "eslint:recommended"."plugin:vue/recommended"]."rules": {
    "vue/html-self-closing": "off"}}Copy the code

Formatting

Vetur support HTML/CSS/SCSS/less/postcss/stylus/js/ts formatting, its internal default Prettier formatting.

Vetur can format only the entire document, not any area.

formatter

These formatters are available:

  • prettier: CSS/SCSS/less/js/ts

  • Prettier-eslint: js, running prettier and eslint –fix

  • prettyhtml: HTML

  • stylus-supermacy: stylus

  • vscode-typescript: js/ts

  • sass-formatter: sass

    Vetur integrates all of the above formatters, and when Vetur encounters a formatter installed on a local project, the locally installed version is preferred (note: local configuration takes precedence). You can also choose vscode of every language in the configuration of the default format, through * * vetur format. DefaultFormatter, set the corresponding language format configuration to none * * can disable the formatting of the language program.

    The current default is:

    {
  "vetur.format.defaultFormatter.html": "prettyhtml"."vetur.format.defaultFormatter.css": "prettier"."vetur.format.defaultFormatter.postcss": "prettier"."vetur.format.defaultFormatter.scss": "prettier"."vetur.format.defaultFormatter.less": "prettier"."vetur.format.defaultFormatter.stylus": "stylus-supremacy"."vetur.format.defaultFormatter.js": "prettier"."vetur.format.defaultFormatter.ts": "prettier"."vetur.format.defaultFormatter.sass": "sass-formatter"
}
Copy the code

The use of ESLint

The introduction of ESLint

ESLint is a tool for identifying and reporting pattern matches in ECMAScript/JavaScript code with the goal of ensuring code consistency and avoiding errors. In many ways, it is similar to JSLint and JSHint, with a few exceptions:

  • ESLint uses Espree to parse JavaScript.
  • ESLint uses AST to analyze patterns in code.
  • ESLint is fully plug-in. Each rule is a plug-in and you can add more rules at run time.

Installation and use

Node.js (^10.12.0, or >=12.0.0).

You can install ESLint using NPM or YARN:

npm install eslint --save-dev
# or
yarn add eslint --dev
Copy the code

Then create a configuration file:

$ npx eslint --init
Copy the code

Then run it in any file or directory:

$ npx eslint yourfile.js
Copy the code

You can also install ESLint globally (using ** NPM install eslint-g **), and esLint-related plug-ins must also be installed globally. However, this approach is not recommended; all plug-ins or other configurations in a project must be installed again in the local project.

Notes

After running ESLint –init, an interactive prompt is generated on the console, allowing you to manually select the ESLint configuration as required.

After the configuration is selected, an.eslintrc configuration file is generated in the project:

  • JS: Use the.eslintrc.js file and export an object containing the configuration.

  • Yaml: eslintrc Yaml.

  • JSON:.eslintrc.json, and allows the file to use comments in JS form.

  • Obsolete usage:.eslintrc.

  • Package. json: Create the eslintConfig property in the file and configure it in this property.

    ** ESLint configuration files have the following priorities:

    const configFilenames = [
  ".eslintrc.js",
  ".eslintrc.yaml",
  ".eslintrc.yml",
  ".eslintrc.json",
  ".eslintrc",
  "package.json"
];
Copy the code

Eslint supports not only file configuration but also code comment configuration. The latter is not recommended because it is cumbersome and not maintainable.

configuration

You can see a number of rules like this in the.eslintrc file:

{
    "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "double"]
    }
}
Copy the code

**”semi” and “quotes”** are the names of rules in Eslint. The first value is the error level, which can be one of the following:

  • “Off” or 0– turns the rule off
  • “Warn” or 1- treats the rule as a warning (does not affect the exit code) and the program will not quit running
  • “Error” or 2—- treats the rule as an error (exit code 1) and exits the program.

You can also use the recommended configuration:

"extends": "eslint:recommended"
Copy the code

➤ In strict mode, all rules marked ** ➤ in the rules page will be enabled by default.

The configuration,
Environments

Specifies the environment in which the script will run. Each environment has a specific set of predefined global variables. By default, all environment variables are false, and these environments do not conflict, so you can define more than one at a time and choose the environment you want. Set environment variables to true to enable environment variables to ensure that code detection does not identify predefined global variables as undefined variables and report errors. Available environments include:

"Env ": {"browser": true, // global variables in the browser environment "node": true, // node.js global variables and node.js scope. "Commonjs ": true, //CommonJS global variables and commonJS scopes (using Browserify/webpack browser code)" shared-Node-browser ": True,// Node.js and Browser universal global variable "ES6 ": true,// enable all ES6 features except modules (this automatically sets the ecmaVersion parser option to 6) "worker": True, // Web Workers global variable "AMD ": true, // define require() and define() as global variable "mocha" like AMD: True, // Add all Mocha test globals "jasmine": true, // Add all Mocha test globals "jest" for Jasmine version 1.3 and 2.0: Mongo: true, // mongo: true, // mongo: true, // MongoDB: true}Copy the code
Globals Global configuration

The **no-undef rule warns when accessing global variables that are not defined in code. If you want to use custom ** global variables in your code, you need to specify them in the Globals configuration. The predefined global variables of the environment can be configured, so this configuration is not required. The configuration method is as follows:

{"globals": {"var1": "writable", // Allows rewriting of variables "var2": "readonly" // allows rewriting of variables if they are read-only}}Copy the code

For historical reasons, false and readable are equivalent to readonly. Similarly, true and writeable are equivalent to writeable, but old values are not recommended.

Parser Configures the Parser

ESLint uses Espree as the default parser. You can specify a different parser in your configuration file as long as the parser meets the following requirements:

1. It must be a Node module that can be loaded from the configuration file where it appears. Typically, this means that you should install the parse package separately using NPM.

2. It must conform to the Parser Interface.

** Note: ** Even if compatibility requirements are met, there is no guarantee that an external parser will work with ESLint, nor will ESLint fix bugs that are incompatible with other parsers.

To use the parser, you need to specify the Parser option in your.eslintrc file. Such as:

{
    "parser": "esprima",
    "rules": {
        "semi": "error"
    }
}
Copy the code

The following parsers are compatible with ESLint:

  • Esprima
  • Babel-eslint – A wrapper around the Babel parser to make it compatible with ESLint. ** Note: ** This package allows you to use some experimental features and still use ESLint syntax checks. You do not need to install this package if you do not use experimental features that ESLint does not support.
  • @typescript-eslint/parser – Converts typescript to estREE compatible form for use in ESLint.

** Note: ** When using custom parsers, the parserOptions property still needs to be configured for ESLint to work properly when handling non-ECMAScript 5 features.

ParseOptions Configures parser options

ESLint allows you to specify which JS language options you want to support. By default, ESLint supports ECMAScript 5 syntax. You can override this setting to enable support for other versions of ECMAScript.

** Note: ** Support for ES6 syntax does not mean that new ES6 global variables or types (such as new types such as Set) are also supported. For ES6 syntax, use {“parserOptions”: {“ecmaVersion”: 6}}; For the new ES6 global variable, use {“env”:{” ES6 “: true}}.

The parserOptions can be configured in the.eslintrc file using the parserOptions property. Available configurations are:

  • EcmaVersion: 3,5 (the default). You can also use 6,7,8,9,10 to specify the version of ECMAScript you want to use. You can also use a version number named after the year, 2015 (same as 6), 2016 (same as 7), or 2017 (same as 8), 2018 (same as 9), or 2019 (same as 10).

  • SourceType: Default is “script” or “module”(if your code is an ECMAScript module).

  • EcmaFeatures: This configuration object specifies the additional language features you want to use:

    • GlobalReturn: Allows return statements to be used in a global scope.
    • ImpliedStrict: impliedStrict global verification mode is enabled.
    • JSX: Enable JSX.

Configuration example:

"parserOptions": { "ecmaVersion": 6, "sourceType": "module", "ecmaFeatures": { "experimentalObjectRestSpread": "JSX ":true, // Enable JSX syntax "globalReturn":true, // allow return to use "impliedStrict":true // enable strict validation mode}}Copy the code
Plugins plug-in configuration

There are hundreds of rules to choose from, but that’s not enough, because the official rules can only check standard JavaScript syntax, and if you’re writing JSX or Vue single-file components, ESLint’s rules can’t handle that. In the.eslintrc configuration file, plugins can be used to store a list of plugin names, which can omit the **eslint-plugin-** prefix.

npm install --save-dev eslint-plugin-vue
{
  "plugins": [
    "vue",   // eslint-plugin-vue
  ]
}
Copy the code
  • Eslint-plugin-babel: A plugin used with babel-esLint. Babel-eslint does a nice job of applying ESLint to Babel, but it can’t change the built-in rules to support experimental features. Eslint-plugin-babel reimplements these problematic rules so that some error messages are not misreported.
  • Eslint-plugin-import: This plugin supports validation of ES6+ ‘s import/export syntax and prevents some file path spelling errors or import name errors.
  • Eslint plugin – prettier: Prettier the plug-in AIDS ESLint in working with Prettier, parsing Prettier as part of ESLint’s output so that formatting code where Prettier is used still follows ESLint’s rules. The plugin works better if you disable all Eslint rules related to code formatting. So you can disable all formatting rules by using eslint-config-prettier (an error is inevitable if prettier does not conform to a valid ESLint rule on how code is formatted).
  • @typescript-eslint/eslint-plugin: Plugins for typescript to assist ESLint. This plugin validates typescript use for ESLint, so use ** @typescript-esLint /parser** as the ESLint parser.
Extends configuration

Configuring the extends option of ESLint allows us to use rules already written by others easily and quickly. A configuration file can be inherited by rules already enabled in the underlying configuration.

Extend is an attribute value that can be:

  • String specifying configuration (path to configuration file, name of shareable configuration, ESLint :recommended or ESLint :all)
  • Array of strings: Each configuration inherits its previous configuration.

ESLint recursively extends configurations, so base configurations can also have extends properties. The relative paths and shareable configuration names in the extends property are resolved from where they appear in the configuration file.

Extensions generally support three types:

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "eslint-config-standard",
  ]
}
Copy the code

  • Eslint: Starts with an official extension of ESLint. There are two: esLint :recommended, esLint: All.

    An extends property with a value of “ESLint :recommended” enables a set of core rules that show common problems.

    The extends property with the value “ESLint :all” enables ** all ** core rules (not recommended).

  • Eslint-config – : starts with a shareable configuration package that outputs a configuration object. The eslint-config- prefix can be omitted when used.

    • eslint-config-airbnb: This package provides all of Airbnb’s ESLint configurations. The toolkit includes the React related ESLint rule configurations, so it will need to be installed separatelyeslint-plugin-import.eslint-plugin-react.eslint-plugin-react-hooks, and eslint-plugin-jsx-a11yThese bags.
    • Eslint-config-airbnb-base: This toolkit functions the same as the previous one, except that it does not include react rules, so there is no need to install plugins related to React.
    • Eslint-config-prettier: This toolkit disables all rules that are not necessary or conflict with Prettier and places them at the end of the extends option. So that it can override other configurations.

  • Eslint-plugin -: Starts with the plugin package. Extends begins with Plugin:. Use some of the rules in the PLUGins configuration of ESLint, which are somewhat equivalent to a subset of the ESLint-plugin in the plugins configuration.

    • Eslint-plugin-vue: This package is the official ESLint plugin for Vue, which enables you to use ESLint to check for

      {
  "extends": "plugin:vue/base"
}
{
  "extends": "plugin:vue/essential"
}
{
  "extends": "plugin:vue/strongly-recommended"
}
{
  "extends": "plugin:vue/recommended"
}
Copy the code
Rules Rule Configuration

The **rules property can do any of the following to extend (or override) the default **rules:

  • Enable additional rules.

  • Options for changing the level of inherited rules without changing it:

    • “Eqeqeq “: [“error”, “allow-null”]
    • Derived configuration: “eqeqeq”: “warn”
    • Last generated configuration: “eqeqeq”: [” WARN “, “allow-null”]

  • Options to override rules in the base configuration:

    • Base configuration: “quotes”: [“error”, “single”, “avoid-escape”]
    • Derived configurations: “quotes”: [“error”, “single”]
    • Final generated configuration: “quotes”: [“error”, “single”]
Overrides the configuration

The configuration of specified files can be overridden by overrides to specify configuration rules for some special files. Such as:

overrides: [
    {
      files: [
        "**/__tests__/*.{j,t}s?(x)",
        "**/tests/unit/**/*.spec.{j,t}s?(x)"
      ],
      env: {
        jest: true
      }
    }
  ]
Copy the code
Ignore Files

You can create a **.eslintignore file in the project root to tell ESLint to ignore specific files and directories. The.eslintignore file is a plain text file in which each line is a glob pattern indicating which paths should be ignored for detection. When ESLint runs, it looks for an.eslintignore** file in the current working directory before determining which files to detect, and if found, these Settings will be applied when traversing the directory. The features available are as follows:

  • Lines starting with **#** are treated as comments.
  • The path is the location equivalent to **.eslintignore** or the current directory.
  • Ignore mode as **.gitignore**.

ESLint always ignores files in /node_modules/*** except for the mode in **.eslintignore files.

ESLint common rules
"no-alert": 0,//禁止使用alert confirm prompt
"no-array-constructor": 2,//禁止使用数组构造器
"no-bitwise": 0,//禁止使用按位运算符
"no-caller": 1,//禁止使用arguments.caller或arguments.callee
"no-catch-shadow": 2,//禁止catch子句参数与外部作用域变量同名
"no-class-assign": 2,//禁止给类赋值
"no-cond-assign": 2,//禁止在条件表达式中使用赋值语句
"no-console": 2,//禁止使用console
"no-const-assign": 2,//禁止修改const声明的变量
"no-constant-condition": 2,//禁止在条件中使用常量表达式 if(true) if(1)
"no-continue": 0,//禁止使用continue
"no-control-regex": 2,//禁止在正则表达式中使用控制字符
"no-debugger": 2,//禁止使用debugger
"no-delete-var": 2,//不能对var声明的变量使用delete操作符
"no-div-regex": 1,//不能使用看起来像除法的正则表达式/=foo/
"no-dupe-keys": 2,//在创建对象字面量时不允许键重复 {a:1,a:1}
"no-dupe-args": 2,//函数参数不能重复
"no-duplicate-case": 2,//switch中的case标签不能重复
"no-else-return": 2,//如果if语句里面有return,后面不能跟else语句
"no-empty": 2,//块语句中的内容不能为空
"no-empty-character-class": 2,//正则表达式中的[]内容不能为空
"no-empty-label": 2,//禁止使用空label
"no-eq-null": 2,//禁止对null使用==或!=运算符
"no-eval": 1,//禁止使用eval
"no-ex-assign": 2,//禁止给catch语句中的异常参数赋值
"no-extend-native": 2,//禁止扩展native对象
"no-extra-bind": 2,//禁止不必要的函数绑定
"no-extra-boolean-cast": 2,//禁止不必要的bool转换
"no-extra-parens": 2,//禁止非必要的括号
"no-extra-semi": 2,//禁止多余的冒号
"no-fallthrough": 1,//禁止switch穿透
"no-floating-decimal": 2,//禁止省略浮点数中的0 .5 3.
"no-func-assign": 2,//禁止重复的函数声明
"no-implicit-coercion": 1,//禁止隐式转换
"no-implied-eval": 2,//禁止使用隐式eval
"no-inline-comments": 0,//禁止行内备注
"no-inner-declarations": [2, "functions"],//禁止在块语句中使用声明（变量或函数）
"no-invalid-regexp": 2,//禁止无效的正则表达式
"no-invalid-this": 2,//禁止无效的this，只能用在构造器，类，对象字面量
"no-irregular-whitespace": 2,//不能有不规则的空格
"no-iterator": 2,//禁止使用__iterator__ 属性
"no-label-var": 2,//label名不能与var声明的变量名相同
"no-labels": 2,//禁止标签声明
"no-lone-blocks": 2,//禁止不必要的嵌套块
"no-lonely-if": 2,//禁止else语句内只有if语句
"no-loop-func": 1,//禁止在循环中使用函数（如果没有引用外部变量不形成闭包就可以）
"no-mixed-requires": [0, false],//声明时不能混用声明类型
"no-mixed-spaces-and-tabs": [2, false],//禁止混用tab和空格
"linebreak-style": [0, "windows"],//换行风格
"no-multi-spaces": 1,//不能用多余的空格
"no-multi-str": 2,//字符串不能用\换行
"no-multiple-empty-lines": [1, {"max": 2}],//空行最多不能超过2行
"no-native-reassign": 2,//不能重写native对象
"no-negated-in-lhs": 2,//in 操作符的左边不能有!
"no-nested-ternary": 0,//禁止使用嵌套的三目运算
"no-new": 1,//禁止在使用new构造一个实例后不赋值
"no-new-func": 1,//禁止使用new Function
"no-new-object": 2,//禁止使用new Object()
"no-new-require": 2,//禁止使用new require
"no-new-wrappers": 2,//禁止使用new创建包装实例，new String new Boolean new Number
"no-obj-calls": 2,//不能调用内置的全局对象，比如Math() JSON()
"no-octal": 2,//禁止使用八进制数字
"no-octal-escape": 2,//禁止使用八进制转义序列
"no-param-reassign": 2,//禁止给参数重新赋值
"no-path-concat": 0,//node中不能使用__dirname或__filename做路径拼接
"no-plusplus": 0,//禁止使用++，--
"no-process-env": 0,//禁止使用process.env
"no-process-exit": 0,//禁止使用process.exit()
"no-proto": 2,//禁止使用__proto__属性
"no-redeclare": 2,//禁止重复声明变量
"no-regex-spaces": 2,//禁止在正则表达式字面量中使用多个空格 /foo bar/
"no-restricted-modules": 0,//如果禁用了指定模块，使用就会报错
"no-return-assign": 1,//return 语句中不能有赋值表达式
"no-script-url": 0,//禁止使用javascript:void(0)
"no-self-compare": 2,//不能比较自身
"no-sequences": 0,//禁止使用逗号运算符
"no-shadow": 2,//外部作用域中的变量不能与它所包含的作用域中的变量或参数同名
"no-shadow-restricted-names": 2,//严格模式中规定的限制标识符不能作为声明时的变量名使用
"no-spaced-func": 2,//函数调用时 函数名与()之间不能有空格
"no-sparse-arrays": 2,//禁止稀疏数组， [1,,2]
"no-sync": 0,//nodejs 禁止同步方法
"no-ternary": 0,//禁止使用三目运算符
"no-trailing-spaces": 1,//一行结束后面不要有空格
"no-this-before-super": 0,//在调用super()之前不能使用this或super
"no-throw-literal": 2,//禁止抛出字面量错误 throw "error";
"no-undef": 1,//不能有未定义的变量
"no-undef-init": 2,//变量初始化时不能直接给它赋值为undefined
"no-undefined": 2,//不能使用undefined
"no-unexpected-multiline": 2,//避免多行表达式
"no-underscore-dangle": 1,//标识符不能以_开头或结尾
"no-unneeded-ternary": 2,//禁止不必要的嵌套 var isYes = answer === 1 ? true : false;
"no-unreachable": 2,//不能有无法执行的代码
"no-unused-expressions": 2,//禁止无用的表达式
"no-unused-vars": [2, {"vars": "all", "args": "after-used"}],//不能有声明后未被使用的变量或参数
"no-use-before-define": 2,//未定义前不能使用
"no-useless-call": 2,//禁止不必要的call和apply
"no-void": 2,//禁用void操作符
"no-var": 0,//禁用var，用let和const代替
"no-warning-comments": [1, { "terms": ["todo", "fixme", "xxx"], "location": "start" }],//不能有警告备注
"no-with": 2,//禁用with
"array-bracket-spacing": [2, "never"],//是否允许非空数组里面有多余的空格
"arrow-parens": 0,//箭头函数用小括号括起来
"arrow-spacing": 0,//=>的前/后括号
"accessor-pairs": 0,//在对象中使用getter/setter
"block-scoped-var": 0,//块语句中使用var
"brace-style": [1, "1tbs"],//大括号风格
"callback-return": 1,//避免多次调用回调什么的
"camelcase": 2,//强制驼峰法命名
"comma-dangle": [2, "never"],//对象字面量项尾不能有逗号
"comma-spacing": 0,//逗号前后的空格
"comma-style": [2, "last"],//逗号风格，换行时在行首还是行尾
"complexity": [0, 11],//循环复杂度
"computed-property-spacing": [0, "never"],//是否允许计算后的键名什么的
"consistent-return": 0,//return 后面是否允许省略
"consistent-this": [2, "that"],//this别名
"constructor-super": 0,//非派生类不能调用super，派生类必须调用super
"curly": [2, "all"],//必须使用 if(){} 中的{}
"default-case": 2,//switch语句最后必须有default
"dot-location": 0,//对象访问符的位置，换行的时候在行首还是行尾
"dot-notation": [0, { "allowKeywords": true }],//避免不必要的方括号
"eol-last": 0,//文件以单一的换行符结束
"eqeqeq": 2,//必须使用全等
"func-names": 0,//函数表达式必须有名字
"func-style": [0, "declaration"],//函数风格，规定只能使用函数声明/函数表达式
"generator-star-spacing": 0,//生成器函数*的前后空格
"guard-for-in": 0,//for in循环要用if语句过滤
"handle-callback-err": 0,//nodejs 处理错误
"id-length": 0,//变量名长度
"indent": [2, 4],//缩进风格
"init-declarations": 0,//声明时必须赋初值
"key-spacing": [0, { "beforeColon": false, "afterColon": true }],//对象字面量中冒号的前后空格
"lines-around-comment": 0,//行前/行后备注
"max-depth": [0, 4],//嵌套块深度
"max-len": [0, 80, 4],//字符串最大长度
"max-nested-callbacks": [0, 2],//回调嵌套深度
"max-params": [0, 3],//函数最多只能有3个参数
"max-statements": [0, 10],//函数内最多有几个声明
"new-cap": 2,//函数名首行大写必须使用new方式调用，首行小写必须用不带new方式调用
"new-parens": 2,//new时必须加小括号
"newline-after-var": 2,//变量声明后是否需要空一行
"object-curly-spacing": [0, "never"],//大括号内是否允许不必要的空格
"object-shorthand": 0,//强制对象字面量缩写语法
"one-var": 1,//连续声明
"operator-assignment": [0, "always"],//赋值运算符 += -=什么的
"operator-linebreak": [2, "after"],//换行时运算符在行尾还是行首
"padded-blocks": 0,//块语句内行首行尾是否要空行
"prefer-const": 0,//首选const
"prefer-spread": 0,//首选展开运算
"prefer-reflect": 0,//首选Reflect的方法
"quotes": [1, "single"],//引号类型 `` "" ''
"quote-props":[2, "always"],//对象字面量中的属性名是否强制双引号
"radix": 2,//parseInt必须指定第二个参数
"id-match": 0,//命名检测
"require-yield": 0,//生成器函数必须有yield
"semi": [2, "always"],//语句强制分号结尾
"semi-spacing": [0, {"before": false, "after": true}],//分号前后空格
"sort-vars": 0,//变量声明时排序
"space-after-keywords": [0, "always"],//关键字后面是否要空一格
"space-before-blocks": [0, "always"],//不以新行开始的块{前面要不要有空格
"space-before-function-paren": [0, "always"],//函数定义时括号前面要不要有空格
"space-in-parens": [0, "never"],//小括号里面要不要有空格
"space-infix-ops": 0,//中缀操作符周围要不要有空格
"space-return-throw-case": 2,//return throw case后面要不要加空格
"space-unary-ops": [0, { "words": true, "nonwords": false }],//一元运算符的前/后要不要加空格
"spaced-comment": 0,//注释风格要不要有空格什么的
"strict": 2,//使用严格模式
"use-isnan": 2,//禁止比较时使用NaN，只能用isNaN()
"valid-jsdoc": 0,//jsdoc规则
"valid-typeof": 2,//必须使用合法的typeof的值
"vars-on-top": 2,//var必须放在作用域顶部
"wrap-iife": [2, "inside"],//立即执行函数表达式的小括号风格
"wrap-regex": 0,//正则表达式字面量用小括号包起来
Copy the code

In addition

If you need to run ESLint while webPack is running, you need to configure esLint-Loader in webPack.

{ test: /\.js$/, loader: 'eslint-loader', enforce: "pre", include: [path.resolve(__dirname, 'SRC ')], // Specify the directory to check. Options: {formatter: Require ('eslint-friendly-formatter') // Specify the format specification for error reporting requires NPM installation}}Copy the code

The use of the Prettier

The introduction of Prettier

Prettier is a generic code formatter that supports the following types: Prettier

  • JavaScript, including ES2017
  • JSX
  • Angular
  • Vue
  • Flow
  • TypeScript
  • CSS, Less, SCSS
  • HTML
  • JSON
  • GraphQL
  • Markdown, including GFM andMDX
  • YAML

It will remove the style of the original code and output a uniform style of code. Prettier recalculates the length of each line of code and reprints it. Prettier forces uniform code style by parsing your code base because it removes the original code style (it doesn’t affect the AST code style). It reprints the parsed AST with its own rules that take into account the maximum length of each line and wrap lines when necessary.

Installation and use

Through the yarn:

yarn add prettier --dev --exact
# or globally
yarn global add prettier
Copy the code

Through the NPM:

npm install --save-dev --save-exact prettier
# or globally
npm install --global prettier
Copy the code

Then create an empty configuration file to let editors and other tools know you are using Prettier:

echo {}> .prettierrc.json
Copy the code

Prettierrc. json does not work, only.prettierrc.js does.

Set the file format priority

  • package.json
  • .prettierrc.json
  • .prettierrc.yaml
  • .prettierrc.yml
  • .prettierrc.js
  • prettier.config.js
  • .prettierrc.toml

Next, create a.prettierIgnore file to let the editor know which files do not need formatting. Lines starting with # are treated as comments. Such as:

# Ignore artifacts:
build
coverage
# Ignore all HTML files:
*.html
Copy the code

4. Format all files using Prettier finally:

npx prettier --write .
# or
yarn prettier --write .
Copy the code

Configuration Item Parameters

PrintWidth: Sets the maximum length of prettier's output. The default is 80. TabWidth: Sets the number of Spaces for each horizontal indentation. Default is 2. UseTabs: indent with TAB instead of Spaces. Default is false. Semi: Whether to add a semicolon to the end of a statement. Default: true. SingleQuote: Whether to enclose a string with single quotation marks. The default value is false.Copy the code

  • QuoteProps: Whether to enclose the key name of an object with quotes. The default is “as-needed”.

    • “As-needed” : Use quotation marks to enclose a particular key name in an object if and only if it needs to be enclosed in quotation marks.
    • “Consistent” : If at least one key name in an object must be wrapped in quotes, all key names are wrapped in quotes
    • “Preserve” : Do nothing special.

  • TrailingCommas: use trailingCommas for multiple lines. Default is “es5”.

    • “None” : not used.
    • “Es5” : Adds the supported trailing comma in ES5.
    • “All” : A trailing comma is added wherever possible.

  • BracketSpacing: Outputs spacing after ({) and before (}) the curly braces used in object literal declarations. Defaults to true.

  • JsxBracketSameLinte: Adds > to the end of the last line of a multi-line JSX element and makes > a single line (not applicable to autistic and elements). Default is false.

  • ArrowParens: Adds parentheses to arguments of single-line arrow functions, default to “always”.

    • “Avoid” – Avoid parentheses if possible, for example: x => x.
    • “Always” – Always add parentheses, example: (x) => x.

Integration with other Linters

Linters often contain rules for formatting as well as code quality checks. When Prettier was used, some Linters’ formatting rules were unnecessary and might even conflict with Prettier.

Fortunately, it is easy to turn off unnecessary rules that conflict with Prettier through third-party configuration.

  • Eslint-config-prettier: Disables rules that aren’t necessary and where ESLint might conflict with Prettier.
  • Tslint-config-prettier: Disables unnecessary rules for which TsLint might prettier.
  • Stylelint-config-prettier: Closes rules that are not necessary and where stylelint might conflict with Prettier.

Notes:

When you search for Prettier and ESLint on the Internet, you often find other related content. Although useful in some cases, these packages are no longer recommended.

  • Eslint-plugin-prettier: Prettier is used as an ESLint rule to integrate prettier into an ESLint workflow without using the separate prettier command.
  • Tslint-plugin-prettier: Prettier acts as a rule for TSLint to integrate prettier into the TSLint workflow without using the single prettier command.
  • Stylelint-prettier: Prettier runs as a rule for stylelint to integrate prettier into the stylelint workflow without the need for the separate prettier command.

These plugins were especially useful when Prettier was first introduced. But these plug-ins have disadvantages:

  • A lot of red wavy lines appear in the editor, which is annoying.
  • They are slower than running Prettier directly.

There are some new tools that run ESLint –fix to fix files immediately after Prettier is run, but these tools are slower than running Prettier alone.

  • Prettier-eslint: Formatting code by prettier, then running esLint –fix to fix the file
  • Prettier-tslint: Format code prettier, then run tsLint –fix to fix the file
  • Prettier-stylelint: Format code prettier, then run stylelint –fix to repair the file

Pre-commit Hook

You can use Prettier with a pre-commit tool. Git add files can be reformatted in the staging area before they are committed.

npx mrm lint-staged
Copy the code

Husky and Lint-staged installations will be installed after execution, and configuration will be automatically added to your package.json file. As follows:

"husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": {"/SRC / * * *. {js, CSS, json, vue} ": [" eslint - fix", "prettier - write", "git add." / / lint - staged over 10.0 version can be omitted visit]}Copy the code

Husky and Lint-Staged workflows are as follows:

Git commit -m "" This action will be intercepted by Husky and lint-staged files will be checked. Lint-staged Git Stash operations will be carried out first and then staged files that match the rules will be checked, only files that have already been committed into the staging area will be checked. 4. After Lint-staged execution has been completed, husky will block the passively staged Git commit if a file fails to pass the check, manually modify the offending file, and re-execute Git Add and Git commit. Steps 2 and 3 will be repeated.Copy the code

Commonly used configuration

Module. exports = {"printWidth": 80, // length per line (defaults to 80) "tabWidth": 2, // how many space per TAB (defaults to 2) "useTabs": "SingleQuote ": true, // Use single quotes (default false) "semi": // use a semicolon at the end of the declaration (default true) "trailingComma": "none", // use trailingComma (default none) "bracketSpacing": True, // Object literals use Spaces between braces (default true) "jsxBracketSameLine": false, // Multi-line JSX > is placed at the end of the last line, instead of starting another line (default false) "arrowParens": "Avoid" // If an arrow function with only one argument has parentheses (default: always)};Copy the code

The recommended configuration

package.json

"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,css,json,vue}":[
      "eslint --fix",
      "prettier --write"
    ]
  }
Copy the code

.eslintrc.js

Module. Exports = {root: true, // Implement node env: {node: true}, extends: ['attack', 'attack/vue', 'prettier'], plugins: ['prettier'], rules: {'prettier/prettier': 'error'}, parserOptions: {// Specify babel-esLint as an ESLint parser: 'babel-eslint' } }Copy the code

.prettierrc.js

module.exports = { singleQuote: true, printWidth: 80, semi: false, tabWidth: 2, trailingComma: 'none', overrides: [ { files: [ '*.json', '.eslintrc', '.tslintrc', '.prettierrc', '.tern-project' ], options: { parser: 'json', tabWidth: 2}}]}Copy the code

Install the appropriate packages

#npm
npm i eslint babel-eslint eslint-config-attack eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue husky lint-staged prettier --save-dev
# yarn 
yarn add babel-eslint eslint-config-attack eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue husky lint-staged prettier --dev
Copy the code