The video recording will be completed on January 11, 2022, so stay tuned!

0. Tool Introduction

  • Eslint is two things:
    • Eslint package for syntax checking at compile time
    • Eslint extension, an extension to vscode that checks syntax specifications and reports errors when opening code
    • Both tools can be used to fix code specification errors
  • Prettier is a formatting tool, used as a plug-in for the Vuter extension tool in the Vue scaffolding project, in conjunction with the ESLint extension tool to check syntax and format fix code

1.eslint

  • Website:https://eslint.bootcss.com/
  • Function: check and repair the JS syntax specification
  • Inspection time:
    • This is checked by the eslint command alone
    • This is checked with a scaffold call to ESLint

1.1 Check Tools

  • Eslint package (downloaded and installed via NPM/YARN or Vue/ CLI)

  • Vscode ESLint extensions (extensions downloaded by vscode search)

1.2 Checking using the ESLint package

1.2.1 Checking through the ESLint package

  • Run the esLint package and pass in the path to the file you want to check

    • Command 1:./node_modules/.bin/eslint yourfile.js

    • Command 2: NPX eslint yourfile.js

      NPX will go to./node_modules/. Bin to find and run the esLint script file

  • Code fixes are made via the ESLint package

    • Command 1:./node_modules/.bin/eslint yourfile.js --fix
    • Command 2:npx eslint yourfile.js --fix

  • Illustration:

1.2.2 Calling ESLint on vue/ CLI

  • Through vue scaffoldingCheck and fix problems
    • Command 1:yarn lint
    • Command 2:npm run lint

1.2.3 Fix.js and.vue at the same time

  • Eslint itself can only handle.js files, not.vue files
  • Solution:
    • Through scaffolding commandyarn lintCheck and repair both files (.js/.vue)

2. Real-time check of vscode plug-ins

2.1 the problem

In real development, it would be too much trouble to call the check command every time we package and compile the code, so when running YARN Serve to start the project or Yarn Build to compile the project, the Vue scaffolding automatically checks the code through ESLint

  • Command: yarn serve

    • Output: Error
    • Note: The project cannot continue compiling and running because it did not fix the error

If you want your project to work, you have to fix bugs! Trouble! Whenever you want to save code, check for syntax errors and fix them!

  • The installationeslintExpand the tool every timevscodeWhen you turn it on, it automatically starts oneEslint extends the tool serverCheck the syntax of the file code and prompt error messages

  • Question: By default,Eslint extension toolOnly errors on the page! No direct fixes for bugs!
  • If you want to use it to fix errors when saving, you need to configure ↓

3. Correct errors during formatting

  • Two extensions + configuration files are required to display and fix errors

3.1 ESLint extension fixes code

  • The ESLint extension tool only checks for specification problems by default, but does not fix them

  • Configure it to enable the repair function:

    • Go to the vscode configuration file

  • Code:
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
}
Copy the code

  • After configuration, save the code file, it will be fixed automatically!

  • Problem: only.js files can be fixed,.vue files cannot be processed!

  • If you want to process.vue files, you need to use the ↓ formatting plug-in

3.2 Vuter. Prettier Repair code

Vscode’s Prettier extension is used to format code, so it can format and fix code according to the specification

  • Note: At this point, we don’t need to install it separately because Vetur has Prettier built in

    If Prettier is already installed separately, disable or uninstall it otherwise it affects the functionality of the ESLint and vetur extensions!

3.2.1 Vetur introduction

  • Function:

    • Syntax coloring.vue files
    • Formatting.vue code (using a third-party formatter to format the code)

  • When do you do formatting?

    • The default is to right-click the menuFormatting documentsTo operate

  • Set vscode to be formatted when saved

3.2.2 Fixing Errors during Formatting

  • Vetur internal uses Prettier to format.vue file code
  • Note:
    • Grammar check with eslint grammar specification package (an/standard/Google /…).
    • The. Vue format uses prettier’s own syntax
    • Prettiter formatting code that doesn’t conform to ESLint’s syntax package, causing ESLint to report errors
  • Solution:
    • Prettier’s syntax specification into esLint’s!

3.2.3 Prettier Standard Configuration

  • Liverpoolfc.tv: prettier. IO/docs/en/opt…

  • Example Create the configuration file.prettierrc.js

  • Configuring the prettier rule:

    // Configuration file ->.prettierrc.js
module.exports = {
    / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- most important -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
    // Contains a maximum of 80 characters
    printWidth: 80.// Use single quotes, default is false(JSX configuration is invalid, default is double quotes)
    singleQuote: true.// End-of-line semicolon, default true
    semi: false./ / as far as possible using a trailing comma (including function parameters), the default none, optional none | es5 | all
    // ES5 includes arrays and objects in ES5
    // all includes all options such as function objects
    trailingComma: 'none'.// ------------------------------------------------------------
    // Use Spaces between braces for object literals (default true) {a:1}
    bracketSpacing: true./ / arrow function parameters default get braces optional get | always
    // avoid parentheses when possible, such as x => x
    // always always has parentheses like (x) => x
    arrowParens: 'always'.// TAB indent size, default is 2
    tabWidth: 2.// Use TAB indent or space. Default is false
    useTabs: false.// ------------------------------------------------------------
    // vue indents scripts and styles
    vueIndentScriptAndStyle: false.// Insert a special @format tag at the top of the file to specify that the file format needs to be formatted.
    insertPragma: false.// End of line newline format
    endOfLine: 'auto'.// HTML whitespace sensitivity
    htmlWhitespaceSensitivity: 'ignore'.// The > tag in JSX is placed at the end of the last line instead of the next line alone. The default is false
    // jsxBracketSameLine: true,
    // JSX double quotes
    // jsxSingleQuote: false,
};
Copy the code

Now, when the project opens the code file, it will automatically display the specification error. When saving the code, it will automatically format and fix the code error.