ESLint

Its goal is to provide a plug-in javascript code detection tool. The website address

In a recent project, ESLint was not used by default when building with CLI3.0. As a result, some people now use other editors and have formatting problems. So esLint was introduced for code checking

Step 1 (Installation)

npm install eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue --save-dev
Copy the code

Introduce some dependencies about ESLint when it appears in your package.json

"eslint": "^ 5.16.0"."eslint-config-airbnb-base": "^ 13.1.0"."eslint-plugin-import": "^ 2.17.3"."eslint-plugin-vue": "^ 5.2.2." ".Copy the code

The installation is successful.

The second step

Add the file to the root directory. Eslintrc.js contents:

module.exports = {
  "env": {
    "browser": true."es6": true."node": true
  },
  "extends": [
    "eslint:recommended"."plugin:vue/essential"]."globals": {
    "Atomics": "readonly"."SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": [
    "vue"
  ],
  rules: {
    "vue/max-attributes-per-line": [2, {
      "singleline": 10,
      "multiline": {
        "max": 1,
        "allowFirstLine": false}}]."vue/name-property-casing": ["error"."PascalCase"].'accessor-pairs': 2, // forces getters and setters to appear in pairs in objects'arrow-spacing': [2, {
      'before': true.'after': true}], // force the arrow function to use consistent Spaces before and after the arrow'block-spacing'A: [2,'always'], // Disallows or enforces Spaces before and after opening and closing parentheses in code blocks'brace-style'A: [2,'1tbs', {
      'allowSingleLine': true}], // enforce a consistent brace style in code blocks'camelcase': [0, {
      'properties': 'always'}], // Enforce camel spelling naming conventions'comma-dangle'A: [2,'never'], // Require or disallow trailing commas'comma-spacing': [2, {
      'before': false.'after': true}], // enforces consistent Spaces around commas'comma-style'A: [2,'last'], // Enforce a consistent comma style'constructor-super': 2, // Requires a super() call in the constructor'curly'A: [2,'multi-line'], // force all control statements to use a consistent parenthesis style'dot-location'A: [2,'property'], // enforces consistent line breaks before and after the dot'eol-last': 2, // Requires or disallows blank lines at the end of the file'eqeqeq': [0, 'allow-null'], // use === and! = ='generator-star-spacing': [2, {
      'before': true.'after': true}], // force a consistent space around the * in generator functions'handle-callback-err'A: [2,'^(err|error)$'], // require fault tolerance in the callback function'indent': [2, 2, {
      'SwitchCase': 1}], // Enforce consistent indentation'jsx-quotes'A: [2,'prefer-single'], // enforce consistent use of double or single quotes in JSX attributes'key-spacing': [2, {
      'beforeColon': false.'afterColon': true}], // enforce consistent spacing between keys and values in attributes of object literals'keyword-spacing': [2, {
      'before': true.'after': true}], // enforces consistent Spaces around keywords'new-cap': [2, {
      'newIsCap': true.'capIsNew': false}], // require the constructor to begin with a capital letter'new-parens': 2, // requires parentheses when the no-argument constructor is called'no-array-constructor'2, // Disable the Array constructor'no-implicit-coercion': 'off'.'no-caller': 2, // Disable arguments. Caller or arguments.callee'no-console': 'off'// Disable console'no-class-assign': 2, // Disallows modifying class declared variables'no-cond-assign'// Disallow assignment operators in conditional expressions'no-const-assign': 2, // Disallows modifying variables declared by const'no-control-regex': 2, // Disallow control characters in regular expressions'no-delete-var': 2, // Disables variable deletion'no-dupe-args': 2, // DisablefunctionDuplicate parameter appears in definition'no-dupe-class-members': 2, // Disallow duplicate names in class members'no-dupe-keys'// Disallow duplicate keys in object literals'no-duplicate-case': 2, // Prohibit the occurrence of duplicatecaseThe label'no-empty-character-class': 2, // Disallow null character sets in regular expressions'no-empty-pattern': 2, // Disallow empty destruct mode'no-eval': 2, // Disableeval(a)'no-ex-assign': 2, // Disallows reassigning the parameters of the catch clause'no-extend-native': 2, // Forbid extension of native types'no-extra-bind': 2, // Disallow unnecessary.bind() calls'no-extra-boolean-cast': 2, // Disallow unnecessary Boolean conversions'no-extra-parens': [0, 'functions'], // Disallow unnecessary parentheses'no-fallthrough': 2, // DisablecaseEvery statement'no-floating-decimal': 2, // Disallow leading and trailing decimal points in numeric literals'no-func-assign': 2, // Forbid yesfunctionDeclare reassignment'no-implied-eval': 2, // Do not use similareval() method'no-inner-declarations'A: [2,'functions'], // disallow variable declarations or in nested blocksfunctionThe statement'no-invalid-regexp': 2, // Disallow invalid regular expression strings in the RegExp constructor'no-irregular-whitespace': 2, // Disallow irregular whitespace outside strings and comments'no-iterator': 2, // disable the __iterator__ attribute'no-label-var': 2, // Labels are not allowed to have the same name as variables'no-labels': [2, {
      'allowLoop': false.'allowSwitch': false}], // disable label statements'no-lone-blocks': 2, // disable unnecessary nesting blocks'no-mixed-spaces-and-tabs': 2, // Disallow the combination of space and TAB indentation'no-multi-spaces': 2, // Disallow multiple Spaces'no-multi-str': 2, // Disallow multi-line strings'no-multiple-empty-lines': [2, {
      'max': 3."maxEOF": 3."maxBOF": 3,}], // Forbid multiple blank lines (set maximum 3 consecutive blank lines here)'no-global-assign': 2, // Disallows assignment to native or read-only global objects. The original no-native reassign has been replaced by this'no-unsafe-negation': 2, // Disallow the negation operator on the left-hand operand of the relational operator. The original no-negated-in-lhs has been replaced with this operator'no-new-object': 2, // Disable the Object constructor'no-new-require'// disallow the new operator when calling require'no-new-symbol': 2, // Disallow the Symbolnew operator from being used with new'no-new-wrappers': 2, // Disallow the new operator for String, Number, and Boolean'no-obj-calls': 2, // Disallow calling global objects as functions'no-octal': 2, // Disables octal literals'no-octal-escape': 2, // Disallow octal escape sequences in strings'no-path-concat'// Disallow string concatenation of __dirname and __filename'no-proto': 2, // Disable the __proto__ attribute'no-redeclare': 2, // Do not declare the same variable more than once'no-regex-spaces': / / 2'no-return-assign'A: [2,'except-parens'], // Prohibited inreturnStatement uses an assignment statement'no-self-assign': 2, // Disallow self-assignment'no-self-compare': 2, // Disallow self comparison'no-sequences': 2, // Disable the comma operator'no-shadow-restricted-names': 2, // Disallow defining identifiers as restricted names'func-call-spacing': 2, // Requires or disallows Spaces between function identifiers and their calls. The original no-spaced func has been replaced with this'no-sparse-arrays': 2, // Disable sparse arrays'no-this-before-super': 2, // Disallow this or super in constructors before calling super()'no-throw-literal': 2, // Disallow throwing exception literals'no-trailing-spaces': 1, // disable end-of-line whitespace'no-undef': 2, // Disables undeclared variables unless they are mentioned in the /*global */ comment'no-undef-init': 2, // disallow initializing variables as undefined'no-unexpected-multiline': 2, // Disallow confusing multi-line expressions'no-unmodified-loop-condition': 2, // Disable immutable loop conditions'no-unneeded-ternary': [2, {
      'defaultAssignment': false}], // Disallow ternary operators when simpler alternative expressions are available'no-unreachable': 2, // Disable inreturn, throw,continue 和 breakStatement followed by unreachable code'no-unsafe-finally': 2, // Disallow control flow statements in finally blocks'no-unused-vars': [2, {
      'vars': 'all'.'args': 'none'}], // disallow unused variables'no-useless-call': 2, // Disallow unnecessary.call() and.apply()'no-useless-computed-key': 2, // Disallow the use of unnecessary computed attributes in objects'no-useless-constructor': 2, // Disable unnecessary constructors'no-useless-escape': 0, // Disables unnecessary escape characters'no-whitespace-before-property': 2, // Disallow whitespace before attributes'no-with': 2, // Disable the with statement'one-var': [2, {
      'initialized': 'never'}], // forces variables in a function to be declared either together or separately'operator-linebreak'A: [2,'after', {
      'overrides': {
        '? ': 'before'.':': 'before'}}], // forces operators to use consistent newlines'padded-blocks': [0, 'never'], // Require or disable in-block padding'quotes'A: [2,'single', {
      'avoidEscape': true.'allowTemplateLiterals': true}], // enforces consistent backticks, double quotes, or single quotes //'semi'A: [2,'never'], // Require or disallow semicolons instead of ASI, semicolon Settings: never never appears semicolons, always must end with semicolons'semi': [0].'semi-spacing': [2, {
      'before': false.'after': true}], // enforces consistent Spaces before and after semicolons'space-before-blocks'A: [2,'always'], // enforces consistent whitespace before blocks'space-before-function-paren'A: [2,'never'], // force infunctionUse a consistent space before the open parenthesis of'space-in-parens'A: [2,'never'], // enforces consistent Spaces inside parentheses'space-infix-ops': 2, // Requires Spaces around the operator'space-unary-ops': [2, {
      'words': true.'nonwords': false}], // enforces consistent Spaces around unary operators'spaced-comment'A: [2,'always', {
      'markers': ['global'.'globals'.'eslint'.'eslint-disable'.'*package'.'! '.', '}], // enforces consistent Spaces in comments // or /*'template-curly-spacing'A: [2,'never'], // requires or disallows the use of whitespace around embedded expressions in template strings'use-isnan': 2, // require isNaN() to check NaN'valid-typeof': 2, // Forces typeof expressions to be compared with valid strings'wrap-iife'A: [2,'any'], // Require IIFE to be enclosed in parentheses'yield-star-spacing'A: [2,'both'], // enforces whitespace around * in yield* expressions'yoda'A: [2,'never'], // Require or disallow the "Yoda" condition'prefer-const'// Declare variables that are not modified after they are declared using const'no-debugger': process.env.NODE_ENV === 'production'? 2:0, // Disable the debugger'object-curly-spacing'A: [2,'always', {
      objectsInObjects: false}], // enforces consistent Spaces in braces"vue/no-use-v-if-with-v-for": ["error", {
      "allowUsingIterationVar": true}]."vue/v-on-function-call": ["error"."never"], // allow function with (a)'array-bracket-spacing'A: [2,'never'] // Enforces consistent Spaces in array brackets}}Copy the code

Step 3 (Testing)

Json file in the command line sctipts

"lint": "eslint --ext .js,.vue src"
Copy the code

Batch inspection code

Example:

Run NPM run Lint

The panel will indicate xx errors and indicate which file. And you’ll be prompted to fix it with –fix

Part 4 (Restoration)

Change the above “lint”: “eslint — ext.js,.vue SRC “to eslint — ext.js,.vue SRC –fix

Run NPM run Lint

errors
warning

Eslint has now been introduced and can be fixed automatically. But — Fix doesn’t completely fix the code, for example

Cooperate withvscodeuse

Purpose: use vscode to achieve the effect of automatic fix on save.

1. Install

Download address

2. Installeslint

Set 3.eslint

Open file – > Preferences – > User Settings, find and open settings.json to add the following configuration

{
    "eslint.enable": true, // Whether to enable detection"eslint.autoFixOnSave": true."files.associations": {
      "*.vue": "vue"
    },
    "eslint.options": {
      "extensions": [
          ".js".".vue"]},"eslint.validate": [
      "javascript", {"language": "vue"."autoFix": true
      },
      "html"."vue"]."git.ignoreMissingGitWarning": true."editor.detectIndentation": false."editor.tabSize": 4."editor.fontSize"14} :Copy the code

4. InstallVeturThe plug-in

Vetur can recognize.vue files in the VS Code editor and can:

1. Syntax highlighting
2. Grammar hint, complete function
3. Grammar testing

5. The configuration is complete

That’s when you get a hint

Press CTRL + S to fix it automatically

Sometimes pressing CTRL + S once won’t fix it, just a few more times, but I usually write a paragraph with CTRL + S and it doesn’t matter.