react+eslint+prettier 项目配置

项目地址

https://gitee.com/zhudachangs/react-eslint-prettierrc-demo

项目地址gitee

项目配置eslint(验证) + prettierrc(配合vscode自动格式话代码)

一、创建一个项目

# 安装 react 脚手架
npm install -g create-react-app

# 使用脚手架创建项目 (，有可能失败)
create-react-app eslint-demo1 

二、配置 Eslint(校验)

安装 React插件

# ESLint允许使用自定义语法分析程序
yarn add @babel/eslint-parser -D
# 检验jsx语法
yarn add eslint-plugin-jsx-a11y -D

# 设定react组件的相关规范
yarn add eslint-plugin-react -D

# prettier专门做代码格式化的事情
yarn add eslint-config-prettier -D
yarn add eslint-plugin-prettier -D

配置.eslintrc

{
    "parser": "@babel/eslint-parser",
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:prettier/recommended"
    ],
    "plugins": [
        "react",
        "prettier"
    ],
    "rules": {
        "prettier/prettier": 0, // 关闭Vscode的prettier验证(防止vscode的prettier冲突！！！！！！)
        "semi": 0, // 行末分号，根据编码习惯选择添加，这里配置的不加分号
        "no-console": 0,
        "comma-dangle": [
            "error",
            "never"
        ], // {}末尾逗号关闭
        "max-len": 0,
        "space-before-function-paren": [
            0,
            "always"
        ],
        "no-unused-expressions": [
            0,
            {
                "allowShortCircuit": true,
                "allowTernary": true
            }
        ],
        "arrow-body-style": [
            0,
            "never"
        ],
        "func-names": 0,
        "prefer-const": 0,
        "no-extend-native": 0,
        "no-param-reassign": 0,
        "no-restricted-syntax": 0,
        "no-eval": 0,
        "no-continue": 0,
        "no-unused-vars": [
            0,
            {
                "ignoreRestSiblings": true
            }
        ],
        "no-underscore-dangle": 0,
        "global-require": 0,
        "import/no-extraneous-dependencies": 0,
        "import/prefer-default-export": 0,
        "import/no-unresolved": 0,
        "import/extensions": 0,
        // react
        "react/jsx-first-prop-new-line": 0,
        "react/jsx-filename-extension": 0,
        "react/jsx-no-bind": 0,
        "react/no-array-index-key": 0,
        "react/require-default-props": 0,
        "react/forbid-prop-types": 0,
        "react/no-string-refs": 0,
        "react/no-find-dom-node": 0,
        "react/no-danger": 0,
        "react/prop-types": 0,
        "react/display-name": 0,
        "react/no-deprecated": 0,
        "react/no-direct-mutation-state": 0,
        "jsx-a11y/href-no-hash": 0,
        "jsx-a11y/no-static-element-interactions": 0,
    },
    "parserOptions": {
        "sourceType": "module",
        "ecmaVersion": 8,
        "requireConfigFile": false,
        "ecmaFeatures": {
            "jsx": true,
            "experimentalObjectRestSpread": true
        },
        "babelOptions": {
            "presets": [
                "@babel/preset-react"
            ]
        }
    },
    "settings": {
        "import/resolver": "node"
    },
    "env": {
        "browser": true,
        "node": true
    }
}

三、配置 .prettierrc.js prettierrc(格式化代码)

module.exports = {
  printWidth: 100, // 指定代码长度，超出换行
  tabWidth: 2, // tab 键的宽度
  useTabs: false, // 不使用tab
  semi: true, // 结尾加上分号
  singleQuote: false, // 使用单引号
  quoteProps: "as-needed", // 要求对象字面量属性是否使用引号包裹,(‘as-needed’: 没有特殊要求，禁止使用，'consistent': 保持一致 , preserve: 不限制，想用就用)
  jsxSingleQuote: false, // jsx 语法中使用单引号
  trailingComma: "none", // 确保对象的最后一个属性后有逗号
  bracketSpacing: true, // 大括号有空格 { name: 'rose' }
  jsxBracketSameLine: false, // 在多行JSX元素的最后一行追加 >
  arrowParens: "always", // 箭头函数，单个参数添加括号
  requirePragma: false, // 是否严格按照文件顶部的特殊注释格式化代码
  insertPragma: false, // 是否在格式化的文件顶部插入Pragma标记，以表明该文件被prettier格式化过了
  proseWrap: "preserve", // 按照文件原样折行
  htmlWhitespaceSensitivity: "ignore", // html文件的空格敏感度，控制空格是否影响布局
  endOfLine: "auto" // 结尾是 \n \r \n\r auto
};

四、vscode settings.json 配置自动保存

{
    "editor.formatOnSave": true, // #每次保存的时候自动格式化
}

常见错误

关闭vscode 自带的 prettierrc校验

一般这种情况就是vscode 的 prettierrc和项目的.prettierrc.js 冲突了

解决办法: .eslintrc 里面关闭 vscode的 prettier

{
    "rules": {
        "prettier/prettier": 0, // 关闭Vscode的prettier验证
    }
}

错误二 'React' must be in scope when using JSX

引用 React 一定要加 React

// 引用 React 一定要加 React ！！！！！！！！！
import React from "react";