Front-end code formatting and validation

preface

Although our team has developed a unified front-end code specification, and also output the corresponding technical specification document. However, even with this documentation, it is difficult to ensure that we can write code that conforms to the team’s specifications in the future. Therefore, we also need to introduce some third-party libraries and plug-ins in the actual project to constrain our project code, unify the code style, and provide the ability to automatically fix part of the problem code.

Here’s a look at some of these common third-party libraries, how they work, and how they can be integrated in our project.

ESLint

ESLint is a plug-in and configurable checker for JavaScript syntax rules and code styles. Because JavaScript is a dynamic, weakly typed language, it lacks a compilation process, and some errors that could have been discovered during compilation are only discovered at runtime. ESLint adds a compilation process to the language, doing a static analysis of the code before it runs and finding bugs in time to help you write more robust code.

How ESLint works

By default, ESLint uses the ESPree parser to parse JavaScript code into an AST (abstract syntax tree) and then drill down through all the nodes of the AST, triggering callbacks that listen for custom rules for the corresponding node.

The results of parsing JavsScript into AST can be viewed at the AstExplorer web site.

ESLint configuration

ESLint can be configured either through JavaScript comments or by specifying configuration files in your project.

Configuration file priority:

.eslintrc.js
.eslintrc.yaml
.eslintrc.yml
.eslintrc.json
.eslintrc
package.jsonIn theeslintConfigfield

Common configuration parameters:

// .eslintrc.js
module.exports = {
  env: {},
  globals: {},
  parser: 'espree'.parserOptions: {},
  plugins: [].extends: [].rules: {},
  overrides: {}};Copy the code

env (Environments)

Specifies the environment in which the script will run. Each environment has a specific set of predefined global variables. For example, if env: {node: true} is configured, it can correctly read node global variables such as global, process, otherwise ESLint will indicate that the variables are not defined.

You can also specify the environment via comments:

/* eslint-env node, mocha */
Copy the code

Common environment variables

browser– Global variables in the browser environment
node– node.js global variables and node.js scope
Es6 es2020, es2021, etc– Enable new ES6+ features
jquery– jQuery global variable

Globals

Configure the global variable. The key value is the corresponding variable name. If the value is set to writable, variable overwriting is allowed. If the value is readonly, variable overwriting is not allowed.

{
  globals: {
    var1: 'writable'.var2: 'readonly'}}Copy the code

You can also specify global variables with comments:

/* global var1:writable, var2:readonly */
Copy the code

Parser

ESLint uses Espree as its parser by default, or you can specify a different parser. The purpose of the parser is to parse the source code into an AST (abstract syntax tree), which makes it easier to verify code rules and translate code.

ParserOptions (Parser configuration)

By default, ESLint supports ECMAScript 5 syntax. You can override this setting to enable support for other versions of ECMAScript and JSX.

The options available are:

ecmaVersion– Specifies the version of ECMAScript to use
sourceType– The default value isscriptCan be specified if the code is an ECMAScript modulemodule
ecmaFeaturesAdditional language features:
- globalReturn– Allows use in global scopereturnstatements
- impliedStrict– Enable strict mode globally (if ecmaVersion is 5 or higher)
- jsx– enable JSX

Plugins

By default, rules in ESLint only validate JS. If we want to validate Vue, we need to add the eslint-plugin-vue plugin. Plugins are usually installed through NPM. When configuring plugins, you can use the plugins keyword to store the list of plugins and omit the eslint-plugin- prefix from the plugin name.

{
  plugins: ['vue'];
}
Copy the code

Extends

There are many rules in ESLint, but none of them are automatically enabled by default. You need to set these rules in Rules, which can be quite tedious. So ESLint designs the extends field to inherit predefined validation rules, which are typically installed via NPM. For example, eslint-config-prettier, where the prefix eslint-config- can be omitted.

{
  extends: ['eslint:recommended'.'prettier']}Copy the code

Built-in extensions:

eslint:recommended– esLint is a recommended extension that reports common problems. You can view details in theThe rules pageThe rule marked √ in.
eslint:all– Enable all core rules in the currently installed ESLint. This is not recommended.

There are more rules than rules.

ESLint comes with a large number of validation rules. To change a rule setting, you must set the rule ID to one of the following values:

'off' 或 0– Close rule
'warn' 或 1– Enable the rule to use warning level errors (will not cause the program to exit)
'error' 或 2– Enable rules that use error level errors (when triggered, the program will exit)

{
  rules: {
    curly: 'error'.quotes: ['error'.'single'].// Plugin rules
    'plugin1/rule1': 'error'}}Copy the code

You can also specify rules using comments:

/* eslint quotes: ["error", "double"], curly: "error" */
Copy the code

Or use block comments to temporarily ban rules from appearing warnings:

/* eslint-disable */Or;/* eslint-disable no-console */
console.log('foo');

/* eslint-disable-next-line */Or;/* eslint-disable-next-line no-console */
console.log('foo');
Copy the code

Overrides

Generally used to override specified file verification rules.

{
  overrides: [{files: ['bin/*.js'].rules: {
        quotes: ['error'.'single']}}]; }Copy the code

ESLint project integration

Here is how to integrate ESLint in a VUE project. When initializing a project using vue-CLI scaffolding (Vue CREATE), you need to check Babel and ESLint. If not, you need to implement vue Add Babel and vue Add ESLint in your project.

Note: The scaffolding used here is @vue/cli version 5.x, which will automatically install core-js @babel/core, @babel/eslint-parser, @vue/cli-plugin-babel, Dependencies such as @vue/cli-plugin-eslint, eslint and eslint-plugin-vue. If @vue/ CLI is 4.x installed with babel-eslint, the dependency has been replaced by @babel/eslint-parser and is no longer maintained.

1. Install dependencies

npm install -D eslint@7 eslint-config-huaer
Copy the code

2. Configuration eslint

// .eslintrc.js
module.exports = {
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  // Extensions to eslint-config-huaer and eslint-plugin-vue are used here
  extends: ['huaer'.'plugin:vue/recommended']};Copy the code

3. Add. Eslintignore

dist/*
node_modules/*
public/*
Copy the code

4. Install the plug-in

To flag and display error messages directly in your project, you also need to install the eslint plug-in in the vscode extension.

Dependency description

@babel/eslint-parser

Babel-eslint replaces babel-esLint (no longer maintained) and enables JS to use experimental syntax such as decorators, as well as Typescript parsers.

@vue/cli-plugin-eslint

If you select the eslint option when building a project using vue-CLI, the CLI will install @vue/cli-plugin-eslint, which will inject lint commands into vue-cli-service, You can configure the lintOnSave field in vue.config.js to determine whether to perform rule checking when saving changes and fix some code that fails the check.

eslint-config-huaer

Eslint extensions for corporate projects, like ESlint-config-Airbnb and eslint-config-Standard, contain a set of rules that conform to our team’s specifications and turn off all format-related rules. Use only ESLint to check for logical errors that it is better at.

eslint-plugin-vue

The ESLint plugin for Vue provides a set of recommended specifications for Vue component files.

Stylelint

StyleLint is a powerful, modern CSS detection tool that, similar to ESLint, helps us avoid errors when writing styles by defining a series of coding style rules.

Stylelint configuration

Stylelint performs lookup and loading of your configuration objects through configuration files, starting from the current working directory, and looking for sources as far as possible in the following order:

package.jsonIn thestylelintattribute
.stylelintrcFile (can be JSON, YAML or JS format)
stylelint.config.jsfile

Once any of them are found, the search is not continued.

Stylelint project integration

The configuration parameters of Stylelint are similar to those of ESLint, and for reasons of space there is no need to go into details. If you are interested, check out the official configuration, which directly explains how to integrate Stylelint into our project.

1. Install dependencies

npm install -D stylelint@13 stylelint-config-standard@22 stylelint-order
Copy the code

Note: Stylelint requires a 13.x version and stylelint-config-Standard requires a 22.x version, otherwise some other problems may occur

2. Configuration stylelint

// .stylelintrc.js
module.exports = {
  extends: ['stylelint-config-standard'].plugins: ['stylelint-order'].rules: {
    'selector-pseudo-class-no-unknown': [
      true,
      {
        ignorePseudoClasses: ['global']}],'selector-pseudo-element-no-unknown': [
      true,
      {
        ignorePseudoElements: ['v-deep']}],'at-rule-no-unknown': [
      true,
      {
        ignoreAtRules: [
          'tailwind'.'apply'.'variants'.'responsive'.'screen'.'function'.'if'.'each'.'include'.'mixin']}],'no-empty-source': null.'named-grid-areas-no-invalid': null.'unicode-bom': 'never'.'no-descending-specificity': null.'font-family-no-missing-generic-family-keyword': null.'declaration-colon-space-after': 'always-single-line'.'declaration-colon-space-before': 'never'.'rule-empty-line-before': [
      'always',
      {
        ignore: ['after-comment'.'first-nested']}],'unit-no-unknown': [true, { ignoreUnits: ['rpx']}],'order/order': ['custom-properties'.'declarations'].'order/properties-order': [
      /* Locate the layout */
      'position'.'top'.'right'.'bottom'.'left'.'z-index'.'float'.'clear'.'columns'.'columns-width'.'columns-count'.'column-rule'.'column-rule-width'.'column-rule-style'.'column-rule-color'.'column-fill'.'column-span'.'column-gap'.'display'.'grid'.'grid-template-rows'.'grid-template-columns'.'grid-template-areas'.'grid-auto-rows'.'grid-auto-columns'.'grid-auto-flow'.'grid-column-gap'.'grid-row-gap'.'grid-template'.'grid-template-rows'.'grid-template-columns'.'grid-template-areas'.'grid-gap'.'grid-row-gap'.'grid-column-gap'.'grid-area'.'grid-row-start'.'grid-row-end'.'grid-column-start'.'grid-column-end'.'grid-column'.'grid-column-start'.'grid-column-end'.'grid-row'.'grid-row-start'.'grid-row-end'.'flex'.'flex-grow'.'flex-shrink'.'flex-basis'.'flex-flow'.'flex-direction'.'flex-wrap'.'justify-content'.'align-content'.'align-items'.'align-self'.'order'.'visibility'.'overflow'.'overflow-x'.'overflow-y'.'clip'.'zoom'.'table-layout'.'empty-cells'.'caption-side'.'border-spacing'.'border-collapse'.'list-style'.'list-style-position'.'list-style-type'.'list-style-image'.'-webkit-box-orient'.'-webkit-box-direction'.'-webkit-box-decoration-break'.'-webkit-box-pack'.'-webkit-box-align'.'-webkit-box-flex'./* Box model */
      'margin'.'margin-top'.'margin-right'.'margin-bottom'.'margin-left'.'-webkit-box-sizing'.'-moz-box-sizing'.'box-sizing'.'border'.'border-width'.'border-style'.'border-color'.'border-top'.'border-top-width'.'border-top-style'.'border-top-color'.'border-right'.'border-right-width'.'border-right-style'.'border-right-color'.'border-bottom'.'border-bottom-width'.'border-bottom-style'.'border-bottom-color'.'border-left'.'border-left-width'.'border-left-style'.'border-left-color'.'-webkit-border-radius'.'-moz-border-radius'.'border-radius'.'-webkit-border-top-left-radius'.'-moz-border-radius-topleft'.'border-top-left-radius'.'-webkit-border-top-right-radius'.'-moz-border-radius-topright'.'border-top-right-radius'.'-webkit-border-bottom-right-radius'.'-moz-border-radius-bottomright'.'border-bottom-right-radius'.'-webkit-border-bottom-left-radius'.'-moz-border-radius-bottomleft'.'border-bottom-left-radius'.'-webkit-border-image'.'-moz-border-image'.'-o-border-image'.'border-image'.'-webkit-border-image-source'.'-moz-border-image-source'.'-o-border-image-source'.'border-image-source'.'-webkit-border-image-slice'.'-moz-border-image-slice'.'-o-border-image-slice'.'border-image-slice'.'-webkit-border-image-width'.'-moz-border-image-width'.'-o-border-image-width'.'border-image-width'.'-webkit-border-image-outset'.'-moz-border-image-outset'.'-o-border-image-outset'.'border-image-outset'.'-webkit-border-image-repeat'.'-moz-border-image-repeat'.'-o-border-image-repeat'.'border-image-repeat'.'padding'.'padding-top'.'padding-right'.'padding-bottom'.'padding-left'.'width'.'min-width'.'max-width'.'height'.'min-height'.'max-height'./* Text layout */
      'font'.'font-family'.'font-size'.'font-weight'.'font-style'.'font-variant'.'font-size-adjust'.'font-stretch'.'font-effect'.'font-emphasize'.'font-emphasize-position'.'font-emphasize-style'.'font-smooth'.'line-height'.'text-align'.'-webkit-text-align-last'.'-moz-text-align-last'.'-ms-text-align-last'.'text-align-last'.'vertical-align'.'white-space'.'text-decoration'.'text-emphasis'.'text-emphasis-color'.'text-emphasis-style'.'text-emphasis-position'.'text-indent'.'-ms-text-justify'.'text-justify'.'letter-spacing'.'word-spacing'.'-ms-writing-mode'.'text-outline'.'text-transform'.'text-wrap'.'-ms-text-overflow'.'text-overflow'.'text-overflow-ellipsis'.'text-overflow-mode'.'-ms-word-wrap'.'word-wrap'.'-ms-word-break'.'word-break'./* Visual effects */
      'color'.'background'.'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader'.'background-color'.'background-image'.'background-repeat'.'background-attachment'.'background-position'.'-ms-background-position-x'.'background-position-x'.'-ms-background-position-y'.'background-position-y'.'-webkit-background-clip'.'-moz-background-clip'.'background-clip'.'background-origin'.'-webkit-background-size'.'-moz-background-size'.'-o-background-size'.'background-size'.'outline'.'outline-width'.'outline-style'.'outline-color'.'outline-offset'.'opacity'.'filter:progid:DXImageTransform.Microsoft.Alpha(Opacity'."-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha".'-ms-interpolation-mode'.'-webkit-box-shadow'.'-moz-box-shadow'.'box-shadow'.'filter:progid:DXImageTransform.Microsoft.gradient'."-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient".'text-shadow'./* Transition animation */
      '-webkit-transition'.'-moz-transition'.'-ms-transition'.'-o-transition'.'transition'.'-webkit-transition-delay'.'-moz-transition-delay'.'-ms-transition-delay'.'-o-transition-delay'.'transition-delay'.'-webkit-transition-timing-function'.'-moz-transition-timing-function'.'-ms-transition-timing-function'.'-o-transition-timing-function'.'transition-timing-function'.'-webkit-transition-duration'.'-moz-transition-duration'.'-ms-transition-duration'.'-o-transition-duration'.'transition-duration'.'-webkit-transition-property'.'-moz-transition-property'.'-ms-transition-property'.'-o-transition-property'.'transition-property'.'-webkit-transform'.'-moz-transform'.'-ms-transform'.'-o-transform'.'transform'.'-webkit-transform-origin'.'-moz-transform-origin'.'-ms-transform-origin'.'-o-transform-origin'.'transform-origin'.'-webkit-animation'.'-moz-animation'.'-ms-animation'.'-o-animation'.'animation'.'-webkit-animation-name'.'-moz-animation-name'.'-ms-animation-name'.'-o-animation-name'.'animation-name'.'-webkit-animation-duration'.'-moz-animation-duration'.'-ms-animation-duration'.'-o-animation-duration'.'animation-duration'.'-webkit-animation-play-state'.'-moz-animation-play-state'.'-ms-animation-play-state'.'-o-animation-play-state'.'animation-play-state'.'-webkit-animation-timing-function'.'-moz-animation-timing-function'.'-ms-animation-timing-function'.'-o-animation-timing-function'.'animation-timing-function'.'-webkit-animation-delay'.'-moz-animation-delay'.'-ms-animation-delay'.'-o-animation-delay'.'animation-delay'.'-webkit-animation-iteration-count'.'-moz-animation-iteration-count'.'-ms-animation-iteration-count'.'-o-animation-iteration-count'.'animation-iteration-count'.'-webkit-animation-direction'.'-moz-animation-direction'.'-ms-animation-direction'.'-o-animation-direction'.'animation-direction'.Miscellaneous / * * /
      'content'.'quotes'.'counter-reset'.'counter-increment'.'resize'.'cursor'.'-webkit-user-select'.'-moz-user-select'.'-ms-user-select'.'user-select'.'nav-index'.'nav-up'.'nav-right'.'nav-down'.'nav-left'.'-moz-tab-size'.'-o-tab-size'.'tab-size'.'-webkit-hyphens'.'-moz-hyphens'.'hyphens'.'pointer-events']},ignoreFiles: ['**/*.js'.'**/*.jsx'.'**/*.tsx'.'**/*.ts']};Copy the code

3. Add the. Stylelintignore file

dist/*
node_modules/*
public/*
Copy the code

4. Install the plug-in

To mark and display error messages directly in your project, you also need to install the stylelint plug-in in vscode’s extension.

Dependency description

stylelint-config-standard

Stylelint-config-standard is an official extension of Stylelint, with a large number of recommended CSS-related rules built in.

stylelint-order

Stylelint-order is a stylelint-Order plugin for CSS attributes. It allows you to customize the writing order of your attributes (e.g. position attributes first, then box model) and automatically correct the order of your attributes.

Prettier

Prettier is a code formatter that automatically formats code when we click Save. Why Prettier is needed when esLint and Stylelint already have built-in rules for formatting code? Because Prettier doesn’t just recognize JS and CSS files, it also supports JSON, MD, and more. Prettier was more specialized in trying to unify the code format.

Integration of the Prettier project

1. Install dependencies

npm install -D prettier eslint-config-prettier eslint-plugin-prettier stylelint-config-prettier
Copy the code

2. Configuration is prettier

// .prettierrc.js
module.exports = {
  // A line of up to 120 characters
  printWidth: 120.// Indent with 2 Spaces
  tabWidth: 2.// Instead of indentation, use Spaces
  useTabs: false.// A semicolon is required at the end of the line
  semi: true.// Use single quotes
  singleQuote: true.// The key of the object is quoted only when necessary
  quoteProps: 'as-needed'.JSX uses double quotes instead of single quotes
  jsxSingleQuote: false.// There is no need for a comma at the end
  trailingComma: 'none'.// Spaces are required at the beginning and end of braces
  bracketSpacing: true.// The tag's Angle bracket needs a newline
  bracketSameLine: false.// Arrow functions with only one argument also need parentheses
  arrowParens: 'always'.// The range in which each file is formatted is the entire content of the file
  rangeStart: 0.rangeEnd: Infinity.// There is no need to write @prettier at the beginning of the file
  requirePragma: false.// There is no need to automatically insert @prettier at the beginning of a file
  insertPragma: false.// Use the default line folding standard
  proseWrap: 'preserve'.// Depending on the display style, HTML should be folded or not
  htmlWhitespaceSensitivity: 'css'.// Indent script and style in vue files
  vueIndentScriptAndStyle: true.// Use lf for line breaks
  endOfLine: 'lf'.// Format the embedded code
  embeddedLanguageFormatting: 'auto'
};
Copy the code

3. Modify esLint and stylelint configurations

Eslint-config-prettier eslint-config-prettier Eslint-config-prettier Eslint-config-prettier Eslint-config-prettier Eslint-config-prettier Eslint-config-prettier

// .eslintrc.js
module.exports = {
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  extends: ['huaer'.'plugin:vue/recommended'.'prettier'].plugins: ['prettier'].rules: {
    'prettier/prettier': 'warn'}};Copy the code

// .stylelintrc.js
module.exports = {
  extends: ['stylelint-config-standard'.'stylelint-config-prettier'].plugins: ['stylelint-order'].rules: {... }}Copy the code

4. Vscode Settings

To automatically format your code when saving, create a.vscode folder in the root of your project and add a settings.json configuration file inside it. The Settings in this file will override the global Settings of VScode.

Configuration contents:

// settings.json
{
  "files.eol": "\n"."editor.tabSize": 2."editor.formatOnSave": true."editor.defaultFormatter": "esbenp.prettier-vscode"."[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "eslint.format.enable": true."eslint.alwaysShowStatus": true."eslint.validate": ["javascript"."javascriptreact"."typescript"."typescriptreact"."html"."vue"]."stylelint.validate": ["css"."postcss"."less"."sass"."scss"."vue"]."css.validate": false."less.validate": false."scss.validate": false
}
Copy the code

Note: the.gitignore file needs to be removed from.vscode. In order to achieve uniform project setup, the.vscode file should also be uploaded

5. Install the plug-in

Added prettier plug-in in vscode extension.

Dependency description

eslint-config-prettier

– Turned off unnecessary rules in ESLint and rules that might conflict with Prettier.

eslint-plugin-prettier

Running Prettier as an ESLint rule, where Prettier finds the differences before and after formatting, and reports the differences as ESLint problems while providing different ESLint fixers for different types of differences.

stylelint-config-prettier

Turns off unnecessary rules in Stylelint and rules that might conflict with Prettier.

Husky and lint – staged

To prevent project members from manually turning validation off or committing misbehaving code by not having plug-ins installed, husky and Lint-staged installments should also be installed to intercept and automate formatting and validation of submitted code at Git commit time. If the verification fails, the commit is blocked.

What is a githooks

Git Hooks are scripts that Git triggers to run when certain events (such as commit, push, receive, etc.) are executed. Similar to “hook functions”, Hooks that are not set for execution are ignored.

After you initialize your local Git repository, the.git/hooks folder is automatically generated in your project directory. This folder contains some sample hook scripts ending in.sample. To enable the hooks, manually remove the.simple suffix from the file.

However, we generally do not manually change the contents of files in.git/hooks, because.git files are not usually uploaded to remote servers, and this is not consistent with team specifications.

husky

Husky automatically generates hook files and shell scripts in the.git/ Hoods directory to enable Githooks.

Husky installation

npm install -D husky@4
Copy the code

The 4.x version is installed here, and the configuration process for the new version of Husky is a bit more tedious.

Husky configuration

You can write the configuration information directly in package.json, or you can configure it using.huskyrc,.huskyrc.js, or husky.config.js files.

inpackage.jsonAdded the configuration content in

{
  "husky": {
    "hooks": {
      "pre-commit": "echo \"git commit trigger husky pre-commit hook\""}}}Copy the code

in.huskyrc.jsInternal configuration

module.exports = {
  hooks: {
    'pre-commit': 'echo "git commit trigger husky pre-commit hook"'}};Copy the code

The above configuration will print a message on the console before git commit.

lint-staged

When uploading code, we usually don’t need to perform Lint checks on the entire project, because previously uploaded files are supposed to conform to The Lint specification. We only need to perform lint checks on the files that are currently added or modified. Lint-staged tools only check in staging areas (git add.) The file.

The installation of lint – staged

npm install -D lint-staged
Copy the code

Lint – staged configuration

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

Lint-staged configurations are files in staged, where js, Vue files in the SRC directory prettier and ESLint are used.

With husky’s pre-commit hooks, you can format and check the code before committing a commit, and automatically reject the commit if it fails.

Combination configurations for Husky and Lint-staged

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"}},"lint-staged": {
    "*.md": [
      "prettier --write"]."*.{js,jsx,ts,tsx}": [
      "prettier --write"."eslint --fix"]."*.{css,scss,less,styl}": [
      "prettier --write"."stylelint --fix"]."*.vue": [
      "prettier --write"."eslint --fix"."stylelint --fix"]},"devDependencies": {
    "eslint": "^ 8.9.0"."husky": "^ 4.3.8"."lint-staged": "^ 12.3.4." "."prettier": "^ 2.5.1." "."stylelint": "^ 13.13.1". }}Copy the code

Q&A

Automatic formatting failure

Check that vscode opens the root directory of the project, as the editor reads the configuration information in the current directory by default.

The resources

eslint-config-alloy
eslint
stylelint
prettier

Front-end code formatting and validation

preface

ESLint

How ESLint works

ESLint configuration

Common configuration parameters:

env (Environments)

Globals

Parser

ParserOptions (Parser configuration)

Plugins

Extends

There are more rules than rules.

Overrides

ESLint project integration

1. Install dependencies

2. Configuration eslint

3. Add. Eslintignore

4. Install the plug-in

Dependency description

@babel/eslint-parser

@vue/cli-plugin-eslint

eslint-config-huaer

eslint-plugin-vue

Stylelint

Stylelint configuration

Stylelint project integration

1. Install dependencies

2. Configuration stylelint

3. Add the. Stylelintignore file

4. Install the plug-in

Dependency description

stylelint-config-standard

stylelint-order

Prettier

Integration of the Prettier project

1. Install dependencies

2. Configuration is prettier

3. Modify esLint and stylelint configurations

4. Vscode Settings

5. Install the plug-in

Dependency description

eslint-config-prettier

eslint-plugin-prettier

stylelint-config-prettier

Husky and lint – staged

What is a githooks

husky

Husky installation

Husky configuration

lint-staged

The installation of lint – staged

Lint – staged configuration

Combination configurations for Husky and Lint-staged

Q&A

Automatic formatting failure

The resources

Related Posts

Vue3. X life cycle and hook functions, do you get?

Vue2 implementation rollup project construction

Summary of CSS responsive layout