Vue in the eslintrc.js configuration in detail

This article is the content resolution of the file ESLINTRC.JS in the Vue project,

describes the functions of each ESLINT configuration item, and why this is set.

More detailed, after reading the more comprehensive understanding of Eslint, basically eliminate the doubts of the file.

/ ** * Reference document * [ESLINT English document] https://eslint.org/docs/user-guide/configuring * [ESLINT “in Chinese Documentation] http: //eeslint.cn/docs/rules/ * // ** * eslint has three usage methods * [1] Use of the js code in the JS code * [2] Eslint will automatically search for items through WebPack’s ESLINTCONFIG field. Configuration in the package.json file * [3] Use the configuration file to use, all files, such as JavaScript, JSON or YAML, etc. * // ** * file ignore * [] Let Eslint skip specific files Detection * [】 通过 设置.. 目 目 目 方式 是 是 方法 方法 方法 方法 方法 方法 方法 方法 方法 方法 方法 方法 方法 方法 方法 方法 方法 方法 方法 方法 方法 方法 方法 方法 方法 方法 方法 方法 方法 方法 方法Parameter Settings * // ** * File Local Settings * [] ESLINT can set the rules for specific code in a specific file, often used to skip a statement. * [] Logout all rules, create a line before the code, add a logout / * eslint-disable * \ /. If there is no resume set statement, the following all code skips detect. * [] Restore ESLINT, create a line before the code, add a logout / * eslint-enablE * \ / * [] Specifies ignored rules, / * eslint-disable no-alert, no-console * \ / * [] is disabled at specific lines, // eslint-disable-line * [] Disable in the next line, / / eslint-disable-next-line * / module.exports = {/ ** * root logo * http://eslint.cn/docs/user-guide/configuring#using-configuration-files * http: // eslint .cn / docs / user-guide / configuring # configuration-cascading-and-hierarchy * [] Identify the current configuration file as the bottom of the file, no need to search for the list of file directories in the last level * [] Default ESLINT configuration The file search method is to search from the target folder, traverse every folder inside, find the configuration file and laminated. I then jump out of this project and spread to the ancestral folder * [] Pay attention to “~ / .eslintrc”, “~” refers to the home directory on Linux, “~ / .eslintrc” is the ESLINT configuration file under the point of reference. For private developers, used for overall computers of the entire computer. This configuration is set to this configuration item root, set ROOT, ESLINT will not search again * [] ESLINT’s effective rules are close to use, close to the configuration item priority, overwrite other configuration items. For example, in a project, you can add a configuration file in a different folder. These rules will overlap the combination to take effect * / root: true, // identify the root configuration file for the current configuration file as ESLINT, let it stop in the parent directory Look for. / ** * parser * http://eslint.cn/docs/user-guide/configuring#specifying-parser * [] ESLint Espree as default resolver * [a] npm parser module must be installed locally. That is, you must follow the local node_module * [] The parser is used to resolve the JS code, how to understand each expression, a bit C ++ compiler concept, will make some syntax analysis, semantic analysis, We can determine that the scenaries do not meet the specifications. Instead of contrast by simple string. * [] The parser has a lot, but the parser compatible with Eslint has the following * espree: default parser, a parser separated from Esprima, some optimization * esprima: JS standard parser * Babel-Eslint : A package for the Babel parser, Babel itself is also a kind of JS parser (otherwise how can it be converted to compatibility code? First, JS parsing can be transformed). If our code needs to be converted through Babel, the parser (experiment) – a parser converts TypeScript to ESTREE compatible format * / Parser: ‘Babel-Eslint’, / ** * Analysis Configuration Item * http://eslint.cn/docs/User-Guide/configuring#specifying-parser-Options * [] The configuration item set here will be passed to the parser, the parser is obtained, and Treatment. Specifically, it is necessary to use the source code of the parser. Here only, the parameter definition is made, and the developer who tells the parser may have these parameters * [] Configuration items are: * “SourceType”: “Module”, // Specify the type of JS code source, Script (Script tag) Introduction?) | Module (ES6 Module Module), default is Script. Why VUE will use Script? Because VUE is compiled by Babel-Loader, the Babel compiled code is Script mode * “ECMAVERSION”: 6, // supported ES syntax, default is 5. Note that only the syntax, does not include the global variable of the ES. Global variables need to be defined in the ENV option * “ECMAFEATURES”: {// features is the meaning of the feature, here to specify “ExperimentAlObjectRestSpread”: true, // enable “JSX” to the object to be specified: true, // True, // Enable JSX Syntax “GlobalReturn”: true, // Allow Return to use “ImpliedStrict” in globally: True // Enable strict check mode} * / ParserOptions: {}, / ** * Run Environment * http: / /eslint.cn/docs/user-guide/configuring#specifying-environments * [] An environment defines a set of predefined global variables * [] Get a global definition of a specific environment, it will not be considered to be developed, Skip definitions for it. Otherwise, it will be considered to change the amount undefined * [] The common runtime environment has the following, more views of the official website * Browser – the global variable in the browser environment. * Node – node.js global variable and node.js scope. * ES6 – Enables all ECMAScript 6 features other than Modules (this option automatically sets the Ecmaversion parser option 6). * AMD – Define Require () and define () as AMDKind of global variables. * Commonjs – CommonJS CommonJS global variables and scope (for Browserify code only runs in the browser / WebPack packed). * Jquery – jQuery global variable. * Mongo – MongoDB global variables. * Worker – Web Workers global variables. * Serviceworker – Service Worker global variables. * / Env: {browser: true, // browser environment} / ** * global variables * http://eslint.cn/docs/user-guide/configuring#specifying-globals * [] define additional global, developers from global variables defined, the rules allowed to skip the no-undef * [] key global variable value is the extra added value of * [] value used to identify the variables can be rewritten, similar to the role of const. true to be rewritten to allow variable [*] Note: To enable the no-global-assign rules to prohibit the read-only global variables to be modified. * / Globals: {// gTool: true, // gTool global variable defined, for example, and this variable can be rewritten} / ** * * http://eslint.cn/docs/user-guide/configuring widget # configuring-plugins * [] also need to download the plug-in node_module [*] Note plug-in ignores the name “eslint-plugin-” prefix, so package.json, the corresponding project name is “eslint-plugin-vue” * [action] is similar to plug parser, the parser for expanding functions, for detecting generation of unconventional jscode. It may also add some specific rules. * [] If Eslint-Plugin-Vue is to help us detect the JS code in and
 in the .vue file * / plugins: ['Vue'], / ** * rule inheritance * http: / /eslint.cn/docs/user-guide/configuring# ue-configuration-files * [] The way inherited has the following * [] ESLINT built-in recommended rules, only one, ie "eslint: recommented" * [] A shared configuration is an NPM package that outputs a configuration object. That is, the NPM is installed into node_module * can be shared configured to omit the prefix ESLINT-Config-, that is, the actual settings installed package name is eslint-config-airbnb-base * [] The rules acquired from the plugin, write rules For the "plugin: plug-in" / configuration name, where the plugin registration can ignore the "Eslint-Plugin" prefix. Such as' plugin: vue / essential '* [] Inherited from the configuration file, inherit an additional configuration file, such as' ./node_modules/coding-standard/eslintdefaults.js' * / extends: [' Plugin: Vue / essential ', // Additional rules can be viewed https://Vuejs.github.io/eslint-plugin-vue/rules/ / ** * "Airbnb, love all welcome" * [] There are two ESLINT specifications, one It is the "eslint-config-air-air-air-air-air-air-air-air-air-air-air-air-air-air-air-air-air-air-limited" basic "eslint-config-airbnb-base", * [] AIRBNB-base includes the syntax detection of ES6, which requires "eslint-plugin-import" * [] So when using airbnb-base, you need to download ESLINT-PLUGIN-IMPORT * [] so Eslint actually because of Airbnb -Base Basic Configuration Project, add ESLINT-PLUGIN-IMPORT plug-in configuration * [] So in Setting and Rules, there are 'Import / XXX' projects, this is modified to eslint-plugin-import configuration * / 'airbnb- Base ',], / ** * Rule shared parameters * http://eslint.cn/docs/user-guide/configuring#adding-shared-settings * [】 Provided to specific rule items, each parameter value, each Rule items will be injected into this variable, but for the rules, if there is any use, look at the settings of each rule, just better than ParserOptions, the parser doesn't have to use it. Here is just to provide this method * [] Don't doubt, through source code verification, this is to pass to each rule item, will pass the parameters, but use not, it is the specific rule * / settings: {/ ** * * * / 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", will pass to each rule item. * settings does not have specific writing rules, "import /" is just the name of the import module yourself. In principle, it is directly named "Resolver", plus "import" is just to better. Not forced setting. * Because there are many "import" pluginsThis configuration item is used by the rule item, so it does not via the Rules settings, but through the settings shared * Specific use can be referred to https://github.com/benmosher/eslint-plugin-import * / 'import / resolver': {/ ** * Here IMPACK is not the import plugin to identify WebPack, and "ESLINT-IMPORT-RESOLVER-WebPack" is installed through NPM, * "ESLINT-IMPORT-RESOLVER -" + "Webpack" If you find the plugin and use it, you can parse the WebPack configuration item. Use the parameters inside. * Mainly use the following parameters, share it to the Import rule, let it 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'}}}}, / ** * Configuration for specific files * [] You can perform specific ESLINT detection via Overrides * [] The path to the specific file is written using the GLOB format, a similar regular path rule, You can match different files * [] Configuration is almost the same as other configurations of ESLINT. The overlay block can contain any other valid configuration options other than Extends, Overrides, and ROOT, * / Overrides:[{'Files': [' bin / *. JS ',' LIB / *. JS '],' ExcludedFiles': '* .test.js',' Rules': {'Quotes': [2,' Single ']}}], / ** * Custom rules * http://eslint.cn/docs/user-guide/configuring#configuring-rules * [] Basic Usage * "OFF" or 0 Close Rule * "WARN "Or 1 Open the rules to warning (not affecting exit code) *" error "or 2 to open rules to errors (exit code when triggering is 1) * such as: 'no-restricted-syntax': 0, // Direction This rule * [] If a certain rule, there is an additional option, you can pass the array, and the first bit of the array must be an error level. Such as 0, 1, 2 * such as 'Semi': ['Error', 'Never'], Never is an additional configuration item * / rules: {/ ** * specific rule * [] there are too many specific rules, no Be introduced, interested students can go to the eslint official website * [] Note XXX / AAA these rules are the custom rules for XXX plug-ins, can't find it in the Eslint official website. Review * [] like Import / Extensions, "eslint-plugin-import" custom rules, need to go to its official website to view https://github.com/benmosher/eslint-plugin-import * / 'Import / Extensions': ['Error', 'Always', {JS: 'NEVER', VUE: 'NEVER'}], 'IMPORT / NO-EXTRANEOUSDEPENDENCIES': ['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, // Not allowed to use ++ symbol" Object-Shorthand ": [" Error "," always ", {" avoidquotes ": false}], // remove Naming "no-lonely-if": 0, // does not allow function parameters to repart to function parameters to function parameters to function parameters are not allowed to re-assapose function parameters to function parameters. NO-MIXED-OPERATORS ": 0, // Does not allow the use of operator" no-underscore-dangle ": 0, // does not allow underscores as one of the variable name" no-under ": 0, // does not allow mixing Use operators 'generator-star-spacing': 'off', 'no-console': 'off', // Disable NO-Console Rule 'Semi': ['Error', 'Never'], // Do not use the semicolon 'comma-dangle': ['Error'], 'EQEQEQ': 0, // does not need to force usageAllful 'max-len': 0, 'Radix': 0, // PARSEIN does not need to pass the second parameter 'linebreak-style': 0, // Force the consistent wrap style, Windows and Mac are different 'consistent -Return ': 0, // Arrow Function does not require final mandatory return value' no-unused-expression ': ["error", {"allowshcircuit": true, "allowternary": true}], // Allow you The use of three-yuan operator 'no-multi-spaces': ['error', {"ignoreeolcomments": true}],}}     The above is this article All of the content, I hope to help everyone's learning, I hope everyone will support Tumi Clouds. 
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment