The most detailed introduction of eslintrc.js configuration in vue

This paper analyzes the content of the file eslintrc.js in the vue project,
This paper introduces the function of each eslint configuration item and why it is set like this.
It's more detailed. After reading it, you can have a more comprehensive understanding of eslint and basically remove the doubts about the file.

 * Reference document
 * [eslint English document:
 * [eslint Chinese document]
 * eslint There are three ways to use it
 * [1]js Used by comments in code
 * [2]Through the setting of the eslintConfig field of webpack, eslint will automatically search the configuration in the package.json file of the project
 * [3]The configuration file can be used in the form of configuration file. There are many file modes for configuration file, such as JavaScript, JSON, YAML, etc
 * File ignored
 * []Let eslint skip the detection of specific files
 * []Set through the ". eslintignore" file in the current working directory
 *  The global path is written in the same way as "gitignore"
 * []You can also set it through the eslintIgnore parameter in the package.json file
 * Local settings in file
 * []eslint You can set specific code rules in specific files, which are often used to skip the detection of a statement.
 * []Log off all rules, create a new line in front of the code, and add log off / * eslint disable * \ /. If you do not restore the set statement, all of the following code skips detection.
 * []Restore eslint, create a new line in front of the code, add logout / * eslint enable*\/
 * []Specify the ignored rule, / * eslint disable no alert, no console*\/
 * []Disable on a specific line / / eslint disable line
 * []Disable on the next line, / / eslint disable next line
module.exports = {
  * Root ID
  * []Identify that the current configuration file is the lowest level file, and there is no need to search the file directory at a higher level
  * []The default search method for eslint's configuration file is to search from the target folder, traverse each internal folder, find the configuration file and cascade it. Then jump out of the project and traverse to the ancestor folder
  * []Note the meaning of ~ /. eslintrc., "~" refers to the home directory on linux, "and" ~ /. eslintrc "refers to the eslint configuration file under the home directory, which is used by private developers and global constraints of the whole computer. This configuration is set by root. If root is set, eslint will not search upward
  * []eslint The effective rule of is to use nearby. The nearer the configuration item, the higher the priority, and overwrite other configuration items. For example, in a project, configuration files can be added in different folders, and these rules will take effect in overlapping combinations
 root: true, // Identify the root profile whose current profile is eslint and stop looking in the parent directory.
  * Parser
  * []ESLint Espree is used as its parser by default
  * []The parser must be a locally installed npm module. That is to say, it must be in accordance with the
  * []The parser is used to parse js code. How to understand each expression, a little bit of the concept of compiler in C + +, will do some syntax analysis and semantic analysis to js, so as to judge whether the statement does not conform to the specification. Instead of simple string comparison.
  * []There are many parsers, but there are several eslint compatible parsers
  * Espree: The default parser, a parser separated from Esprima, has made some optimizations
  * Esprima: js Standard parser
  * Babel-ESLint:  As a package of Babel parser, Babel itself is also a kind of js parser (otherwise, how can it be converted into compatibility code? First, js parsing is needed to convert it). If our code needs to be transformed by Babel, this parser should be used accordingly
  * typescript-eslint-parser(Experiment) - a parser that converts TypeScript to an ESTree compatible format
 parser: 'babel-eslint',
  * Parser configuration item
  * []The configuration items set here will be passed to the parser, obtained by the parser, and processed. It depends on whether the source code of the parser makes use of it. Here, only the parameters are defined and specified to tell the parser developers that they may have these parameters
  * []The configuration items are:
  * "sourceType": "module",  // Specifies the type of JS code source, script? )| module (es6 module), the default is script. Why does vue use script? Because vue is compiled through babel loader, and the compiled code of babel is script mode
  * "ecmaVersion": 6,     // Supported es Syntax version, default is 5. Note that it's just syntax, not global variables of ES. Global variables need to be defined in the env option
  * "ecmaFeatures": {     // Features Is the meaning of the feature, which is used to specify which other language objects to use
    "experimentalObjectRestSpread": true, //Enable extension of objects
    "jsx": true,              //Enable jsx syntax
    "globalReturn":true,          //Allow return to be used globally
    "impliedStrict":true          //Enable strict verification mode
 parserOptions: {},
  * Running environment
  * []An environment defines a set of predefined global variables
  * []If the global definition of a specific environment is obtained, it will not be considered as a development definition, and its definition detection will be skipped. Otherwise, it will be considered that the change quantity is not defined
  * []Common operating environments are as follows, more can be found on the official website
  * browser - Global variables in the browser environment.
  * node - Node.js Global variables and Node.js scope.
  * es6 - Enable all ECMAScript 6 features except modules (which automatically sets the ecmaVersion parser option to 6).
  * amd - Define require() and define() as global variables like amd.
  * commonjs - CommonJS Global variables and CommonJS scope (for browser only code packaged by Browserify/WebPack).
  * jquery - jQuery Global variable.
  * mongo - MongoDB Global variable.
  * worker - Web Workers Global variable.
  * serviceworker - Service Worker Global variable.
 env: {
  browser: true, // Browser environment
  * global variable
  * []Define additional global and developer defined global variables to skip no undef rule
  * []key Value is an additional global variable
  * []value Value is used to identify whether the variable can be overridden, similar to const. true to allow variables to be overridden
  * []Note: to enable the no global assign rule to disable modification of read-only global variables.
 globals: {
  // gTool: true, / / for example, the global variable gTool is defined, and this variable can be overridden
  * Plug-in unit
  * []Plug in also needs to be downloaded in node module
  * []Note that the plug-in name ignores the "eslint plugin -" prefix, so in package.json, the corresponding project name is "eslint plugin Vue"
  * []The plug-in function is similar to the parser, which is used to extend the function of the parser and detect unconventional js code. Some specific rules may also be added.
  * []For example, eslint plugin vue is to help us detect the js code in < template > and < script > in the. vue file
 plugins: [
  * Rule succession
  *[]There are several ways to inherit
  *[]eslint There is only one built-in recommendation rule, that is, "eslint:recommended"
  *[]Shareable configuration is an npm package that outputs a configuration object. That is, install it into node module through npm
  *  Shareable configuration can omit the prefix of package name eslint config -, that is to say, the package name actually installed is eslint config airbnb base
  *[]The writing rule of the rule obtained from the plug-in is "plugin: plugin package name / configuration name", where the plug-in registration can also ignore the prefix "eslint plugin -". Such as' plugin:vue/essential '
  *[]Inherit from the configuration file, i.e. inherit another configuration file, such as'. / node_modules / coding standard / eslintdefaults. JS'
 extends: [
  'plugin:vue/essential', // Additional rules can be found at
   * 「airbnb,Audemars Pigeut welcomes
   * []There are two kinds of eslint specifications, one is the "eslint config airbnb" with react plug-in, the other is the basic "eslint config airbnb base",
   * []airbnb-base It includes syntax detection of ES6, which depends on "eslint plugin import"
   * []So when using airbnb base, you need to use npm to download eslint plugin import
   * []So eslint has actually added the eslint plugin import plug-in configuration because of the airbnb base basic configuration project
   * []So in setting and rules, there are 'import/xxx' items. Here is the eslint plugin import configuration
  * Rule sharing parameters
  * []It is provided to specific rule items, each parameter value and each rule item will be injected into this variable. But for the corresponding rule, whether it is useful depends on the setting of each rule, just like parserioptions, which the parser doesn't know without. This is just the way
  * []No doubt, after source code verification, this is what is passed to each rule item. It will be passed as a parameter, but no use is the specific rule
 settings: {
   * Note that "import/resolver" is not an eslint rule item, which is different from "import/extensions" in rules. It is not a rule item
   * Here is just a parameter name, called "import/resolver", which will be passed to each rule item.
   * settings There is no specific writing rule. "Import /" is just the name of the import module itself. In principle, it can also be directly named "resolver", plus "import" just for better differentiation. Not mandatory.
   * Because this configuration item is used by many rule items in the import plug-in, it is not set through rules, but shared through settings
   * For details, please refer to
  'import/resolver': {
    * Here, the incoming webback is not recognized by the import plug-in, and "eslint import resolver webback" is installed through npm,
    * 「import」The plug-in can find the plug-in through "eslint import resolver" - + "webback" and use it to parse the webback configuration items. Use the parameters in.
    * These parameters are mainly used to share with the import rules to correctly identify the import path
    * extensions: ['.js', '.vue', '.json'],
    * alias: {
    * 'vue$': 'vue/dist/vue.esm.js',
    * '@': resolve('src'),
    * 'static': resolve('static')
    * }
   webpack: {
    config: 'build/webpack.base.conf.js'
  * File specific configuration
  * []You can perform specific eslint detection for specific files through overrides
  * []Glob al format is used for path writing of specific files, which is similar to regular path rules and can match different files
  * []The configuration is almost the same as other configurations of ESLint. The override block can contain any valid configuration options other than extensions, overrides, and root in the regular configuration,
 overrides: [
   'files': ['bin/*.js', 'lib/*.js'],
   'excludedFiles': '*.test.js',
   'rules': {
    'quotes': [2, 'single']
  * Custom rules
  * []Basic usage
  * "off" Or 0 close rule
  * "warn" Or 1 opens the rule as a warning (does not affect the exit code)
  * "error" Or 2 opens the rule as an error (exit code is 1 when triggered)
  * For example: 'no restricted syntax': 0, / / means the rule is closed
  * []If a rule has additional options, it can be passed through an array, and the first bit of the array must be the error level. Such as 0,1,2
  * For example, 'semi': ['error ',' never '], never is an additional configuration item
 rules: {
   * Specific rules
   * []There are too many specific rules, so I won't introduce them. Students who are interested can check them on the official website of eslint
   * []Note that the xxx/aaa rules are self-defined by the xxx plug-in, which can not be found on the official website of eslint. You need to refer to the corresponding plug-in official website
   * []For example, import/extensions, this is a custom rule of "eslint plugin import". You need to check on its official website
  'import/extensions': ['error', 'always', {
   js: 'never',
   vue: 'never'
  'import/no-extraneous-dependencies': ['error', {
   optionalDependencies: ['test/unit/index.js']
  'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  "no-restricted-syntax": 0, //
  "guard-for-in": 0, //
  "prefer-const": 0, //
  "no-else-return": 0, //
  "no-plusplus": 0, // + + symbols are not allowed
  "object-shorthand": ["error", "always", { "avoidQuotes": false }], // Remove disallowing naming of 'videoData.isPause'(newValue)
  "no-lonely-if": 0, // Reassignment of function parameters is not allowed
  "no-param-reassign": 0, // Reassignment of function parameters is not allowed
  "no-mixed-operators": 0, // Mixed operators are not allowed
  "no-underscore-dangle": 0, // Underscores are not allowed as one of the variable names
  "no-under": 0, // Mixed operators are not allowed
  'generator-star-spacing': 'off',
  'no-console': 'off', // Disable no console rule
  'semi': ['error', 'never'], // No semicolon at the end of line
  'comma-dangle': ['error'],
  'eqeqeq': 0, // It is not necessary to force full grade
  'max-len': 0,
  'radix': 0,// parseInt does not need to pass the second parameter
  'linebreak-style': 0, // Enforce consistent line feed style, windows is not the same as mac
  'consistent-return': 0, // Arrow function does not need to force return value at last
  'no-unused-expressions': ["error", { "allowShortCircuit": true, "allowTernary": true }], // Allows you to use ternary operators in expressions
  'no-multi-spaces': ['error', { "ignoreEOLComments": true }],


In order to help you make learning easier and more efficient, we will share a large number of materials for free, and help you to overcome difficulties on the way to becoming a full stack engineer, or even an architect. Here we recommend a front-end full stack learning exchange circle: 866109386 Welcome to join the group for discussion, study and exchange, and make common progress.

When we really start to learn, we inevitably don't know where to start, which leads to low efficiency and affects the confidence to continue learning.

But the most important thing is that we don't know which technology needs to be mastered. When we study, we often step on the pit and waste a lot of time. So it is necessary to have effective resources.

Finally, I wish all the front-end programmers who encounter bottle disease and don't know what to do, and I wish you all the best in the future work and interview.

Tags: Vue JSON npm Webpack

Posted on Wed, 04 Dec 2019 15:42:32 -0800 by CodeWriter