eslint

作用

• check syntax 语法检查
• find problems 发现问题
• enforce code style 强制代码风格

  安装

  npm install eslint —save-dev
  –save直接依赖 -dev指开发环境进行依赖
  会自动写入到package.json的devDependencies节点

  /* eslint-disable */
  在文件头部声明忽略某个文件的eslint检测

// eslint-disable-next-line
或者在某一行js代码上添加忽略某一行代码的eslint检测

空格问题

eslintrc配置

module.exports = {
  parser: 'babel-eslint',
  env: {
    browser: true,
    es6: true,
  },
  extends: 'airbnb',
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  plugins: ['react'],
  rules: {
    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }], //在JS文件中允许存在JSX语法
    'global-require': 'off', //image指定source时要用require语句
    indent: ['error', 4], //缩进规则为4个空格
    'react/jsx-indent': ['error', 4], //缩进规则为4个空格
    'react/jsx-indent-props': ['error', 4], //缩进规则为4个空格
    'react/prop-types': ['error', { ignore: ['tintColor', 'navigation'] }],
    'react/no-multi-comp': ['error', { ignoreStateless: true }],
    'react/prefer-stateless-function': ['error', { ignorePureComponents: true }],
    'max-len': ['error', { code: 100 }],
  },
};

忽略检测的文件

在根目录创建 .eslintignore文件，配置不进行eslint检测的文件

__tests__/*.*
babel.config.js
/scripts/

执行检查

• 检查某个文件：npx eslint [文件名，文件夹等]
  示例：
  检查单个文件：npx eslint ./src/app.js
  检查某个文件夹：npx eslint ./src
• 检查并修复
  npx eslint ./src/app.js —fix