Eslint in the Vue of the use of detailed _ review

Use of Eslint 1. Review code compliance and Uniform Code style; 2. Review code for grammatical errors;
Chinese web address http://eslint.cn/use Vscode compiler in Vue project

Choose whether to use Eslint management code when initializing the project (select Y to open by default)
Use Eslint to lint your code? (y/n)

The default use of this standard https://github.com/standard/standard/blob/master/docs/RULES-zhcn.md is the following for. Editorconfig,. Eslintignore,. Eslintrc.js file for detailed explanation. editorconfig files (primarily for configuring the IDE)

Specification indentation style, indentation size, tab length and character set, etc., to solve the different IDE coding fan settings. The Editorconfig plugin will look for a. editorconfig file in the folder where the currently edited file resides or in its parent folder. If it does, the editor's behavior is consistent with that defined in the. editorconfig file and has precedence over the settings of the editor itself.

Root = True
# for all files valid  //[*js] only valid for JS file
[*]
#设置编码格式
charset = utf-8
#缩进类型 Optional space  and tab
Indent_style = Space
#缩进数量可选整数值2 or 4, or tab
indent_size = 2
#换行符的格式
end_of_line = LF
# Whether to insert a blank line at the end of the file select True and  false
Insert_final_newline = True
# whether to delete a space at the end of a line  to choose True and false
trim_ Trailing_whitespace = True

. eslintignore files (files that need to be eslint ignored, only valid for. js files)

/build/
/config/
/dist/
/src/utils/
/src/router/*.js

. eslintrc.js file (used to configure Eslint check rules)

Module.exports = {//This item is used to tell Eslint to find the current profile can not find root:true to the parent,//This is used to specify the Eslint parser, the parser must conform to the rules, the Babel-eslint parser is the Babel parser Packaging makes it eslint with the parser: ' Babel-eslint ',//This is used to specify the JavaScript language type and style, SourceType used to specify the way JS is imported, the default is script, which is set to Mo Dule, refers to a block of imports Parseroptions: {sourcetype: ' module '},//The global variable for the specified environment, the following configuration specified as the browser environment env: {b Rowser:true,},//Https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style//This item is used to Configure the standard JS style, that is, write code when you want to standardize the writing, if you use Vs-code I think should be able to avoid error extends: ' Standard ',//required to lint *.vue files//This is used to  The plugin name is provided, and the eslint-plugin-is omitted, and the following configuration is used to standardize the HTML plugins: [' html '],//Add your custom rules here// The following rules are used to set the rule for code from the plug-in, use the prefix eslint-plugin-///////////////////////////"off"-> 0 closing rule/
    /"Warn"-> 1 to open the warning rule//"error"-> 2 to open the error rules//Understand the above, the following code is believed to see the rules: {//Allow async-await ' Generator-star-spacing ': ' Off ',///Allow debugger during development ' No-debugger ': Process.env.NODE_ENV = = ' production '? ' ERROR ': ' Off ',//JS statement must end with semicolon ' semi ': [' off ', ' always '],///three equal sign ' Eqeqeq ': 0,//force in note/////* Use consistent Space ' spaced-comment ': 0,//The following keyword uses a consistent space ' keyword-spacing ': 0,//force a consistent space before the opening parenthesis of a function ' SPACE-BEF Ore-function-paren ': 0,//quote type ' quotes ': [0, ' single '],//Prohibit unused variable//' No-unused-vars ': 0,//Required or Prohibit end comma ' Comma-dangle ': 0}}

Off or 0-close the rule

"Warn" or 1-open rule

"Error" or 2-open rule How to add eslint 1 to the old project. Add. Editorconfig,. Eslintrc.js,. Eslintignore these three files in the table of contents 2. Add Eslint required package in Package.json's "devdependencies"

    "Babel-eslint": "^7.1.1", "
    eslint": "^3.19.0",
    "Eslint-config-standard": "^10.2.1",
    " Eslint-friendly-formatter ":" ^3.0.0 ","
    Eslint-loader ":" ^1.7.1 ",
    " eslint-plugin-html ":" ^3.0.0 ",
    " Eslint-plugin-import ":" ^2.7.0 ","
    Eslint-plugin-node ":" ^5.2.0 ",
    " eslint-plugin-promise ":" ^3.4.0 ",
    " Eslint-plugin-standard ":" ^3.0.1 ",

3. Add the Eslint rule to the Bulid/webpack.base.conf.js document and take effect

  in the rules of module, add
  module: {
    rules: [
      {
        test:/\. ( Js|vue) $/,
        loader: ' Eslint-loader ',
        enforce: ' Pre ',
        include: [Resolve (' src '), resolve (' test ')],
        Options: {
          formatter:require (' Eslint-friendly-formatter '),////
          not conforming to Eslint rule only warning (default run error)
          // Emitwarning:!config.dev.showeslinterrorsinoverlay
        }
      },
    ]
  }

4. Re-bulid code to run, perfect effective!!!!!! Recommended three Vscode Plug-ins Eslint (only support highlighting JS files) editorconfig typings (code error prompts) Common error

There is a blank line at the end of the file (Eol-last)

Missing semicolon (' semi ': [' error ', ' Always '])

Missing space after keyword

String does not use single quotes (' quotes ': [1, ' a '])

Indentation Error

No use of congruent (EQEQEQ)

Import component is not used

New an object is not assigned to a constant (you can add this code before the instance/eslint-disable no-new/ignores Eslint checks)
More than one line of blank lines (no-multiple-empty-lines)
annotation character//back indent error (lines-around-comment)
Vscode User Configuration

{
    "workbench.startupeditor": "Newuntitledfile",
    //Following is Eslint format code
    " Vetur.format.defaultFormatter.js ":" Vscode-typescript ","
    Javascript.format.insertSpaceBeforeFunctionParenthesis ": True,
    " Editor.quicksuggestions ": {
      " strings ": True
    },
    "Editor.tabsize": 2,
    "eslint.validate": [
      "JavaScript",
      "Javascriptreact",
      " HTML ",
      " Vue ",
      {
        " language ":" HTML ",
        " AutoFix ": True
      }
    ],
    //" Files.autosave ":" Onfocuschange ",
    //" Vetur.validation.template ": false,///to
    prevent the single quotation mark from changing double quotation marks//" in the format of code
    Prettier.singlequote ": True,
    " Files.autosave ":" Afterdelay ",
    " Files.autosavedelay ": 1500,
    //" Git.confirmsync ": false
    //configure whether to receive automatic updates from the update channel. A reboot is required after the change.
    ' Update.channel ': ' None '
}