Einführung in die ESlint-Konfigurationsdatei eslintrc.js in vue-cli

eslint ist ein Tool zum Verwalten und Erkennen des JS-Codestils. Es kann mit Editoren wie dem eslint-Plug-in von vscode verwendet werden. Wenn Code vorhanden ist, der nicht mit dem Inhalt der Konfigurationsdatei übereinstimmt, wird ein Fehler oder eine Warnung gemeldet. In diesem Artikel wird hauptsächlich die detaillierte Erklärung der ESlint-Konfigurationsdatei eslintrc.js in vue-cli erläutert ist ziemlich gut. Jetzt werde ich es mit Ihnen teilen und Ihnen helfen, eine Referenz zu erstellen.

exlint installieren

npm init -y
npm install eslint --save-dev
node_modules\.bin\eslint --init 初始化配置文件，此配置文件配置好之后，vscode编辑器自动识别

Erklärung der .eslintrc.js-Konfigurationsdatei von vue-cli

// http://eslint.org/docs/user-guide/configuring

module.exports = {
  //此项是用来告诉eslint找当前配置文件不能往父级查找
  root: true, 
  //此项是用来指定eslint解析器的，解析器必须符合规则，babel-eslint解析器是对babel解析器的包装使其与ESLint解析
  parser: 'babel-eslint',
  //此项是用来指定javaScript语言类型和风格，sourceType用来指定js导入的方式，默认是script，此处设置为module，指某块导入方式
  parserOptions: {
    sourceType: 'module'
  },
  //此项指定环境的全局变量，下面的配置指定为浏览器环境
  env: {
    browser: true,
  },
  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  // 此项是用来配置标准的js风格，就是说写代码的时候要规范的写，如果你使用vs-code我觉得应该可以避免出错
  extends: 'standard',
  // required to lint *.vue files
  // 此项是用来提供插件的，插件名称省略了eslint-plugin-，下面这个配置是用来规范html的
  plugins: [
    'html'
  ],
  // add your custom rules here
  // 下面这些rules是用来设置从插件来的规范代码的规则，使用必须去掉前缀eslint-plugin-
  // 主要有如下的设置规则，可以设置字符串也可以设置数字，两者效果一致
  // "off" -> 0 关闭规则
  // "warn" -> 1 开启警告规则
  //"error" -> 2 开启错误规则
  // 了解了上面这些，下面这些代码相信也看的明白了
  'rules': {
    // allow paren-less arrow functions
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
  }
}

Verwandte Empfehlungen:

Beispiel für eine detaillierte Erklärung der Vue-Cli-Vscode-Konfiguration Eslint

So deaktivieren Sie ESLint im Vue-Projekt

Detaillierte Erläuterung der ESLint-Regeln (1)

Das obige ist der detaillierte Inhalt vonEinführung in die ESlint-Konfigurationsdatei eslintrc.js in vue-cli. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!