ESlint配置案例及如何配置

Posted kaiqinzhang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ESlint配置案例及如何配置相关的知识,希望对你有一定的参考价值。

1.中文官网:

https://eslint.cn/

 

2.先看一个写好的eslint规则:

技术图片

 

 

3.下面再给一个例子

module.exports = {
  "parser": "babel-eslint",
  ‘env‘: {
    ‘browser‘: true,
    ‘es6‘: true
  },
  ‘extends‘: [
    ‘eslint:recommended‘,
		‘plugin:react/recommended‘
  ],
  ‘globals‘: {
    ‘Atomics‘: ‘readonly‘,
    ‘SharedArrayBuffer‘: ‘readonly‘
  },
  ‘parserOptions‘: {
    ‘ecmaFeatures‘: {
      ‘jsx‘: true,
      legacyDecorators: true
    },
    ‘ecmaVersion‘: 2018,
    ‘sourceType‘: ‘module‘
  },
  ‘plugins‘: [
		‘react‘
  ],
  ‘rules‘: {
    ‘no-console‘:‘off‘,
    ‘indent‘: [
      ‘error‘,
      2
    ],
    ‘linebreak-style‘: [
      ‘error‘,
      ‘unix‘
    ],
    ‘quotes‘: [
      ‘error‘,
      ‘single‘
    ],
    ‘semi‘: [
      ‘error‘,
      ‘never‘
    ],
    ‘react/prop-types‘: 0,
		‘no-mixed-spaces-and-tabs‘: [2, ‘smart-tabs‘]
  }
}

  

4.给了这么多例子,但eslint的配置写起来也太麻烦了。接下来教你一种方法(前提是你的项目必须装eslint了哈):

在你项目根目录的终端输入   :

eslint --init

 这时终端会问你几个问题,你根据你项目的情况回答yes or no,如下:

技术图片

 

 这时会生成一个.eslinttrc.js文件,你可以在进一步修改。

 

5.有一些问题,比如eslint的规则http://eslint.cn/docs/rules/中,有小扳手图标的,编辑器可以帮你自动修复。

技术图片

 

 这时,你需要在package.json中进行如下配置:

技术图片

以上是关于ESlint配置案例及如何配置的主要内容,如果未能解决你的问题,请参考以下文章

如何配置VSCode中的Prettier和ESLint标准

如何配置 ESLint 工作流

eslint 常用配置

在VSCode中配置代码自动 eslint 格式化(修改eslint规则eslint忽略文件)

vue 学1(cp) Eslint 配置及规则说明(报错)

vscode 中 eslint 的配置