react项目使用craco进行配置并集成Prettier、Eslint...

为什么使用craco

使用create-react-app 创建的项目默认是无法修改其内部的webpack配置的，不像vue-cli那样可以通过一个配置文件修改。 这时我们需要使用craco来覆盖配置

使用步骤

• 进入项目,安装craco依赖

npm install @craco/craco@alpha -D

• 在项目根目录下创建配置文件craco.config.js

const path = require('path')
const CracoLessPlugin = require('craco-less')

const resolve = (dir) => path.resolve(__dirname, dir)

module.exports = {
  plugins: [
    { 
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            javascriptEnabled: true
          }
        }
      }
    }
  ],
  webpack: {
    alias: {
      '@': resolve('src')
    }
  }
}

• 修改 package.json 中的 scripts

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
  },

集成Eslint

简介

ESLint 是一个在 JavaScript 代码中通过规则模式匹配作代码识别和报告的插件化的检测工具，它的目的是保证代码规范的一致性和及时发现代码问题、提前避免错误发生。

安装Eslint

npx eslint --init

根据提示自动创建配置文件

添加命令进行eslint检测

在package.json中添加如下命令：

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    // 新添加的lint命令，意思是使用.eslintrc.js检测src文件夹下的后缀为.ts,.tsx,.js,.jsx的所有文件,并对可自动修复的eslint报错进行修复
    "lint": "eslint -c .eslintrc.js src --ext .ts,.tsx,.js,.jsx --fix"
  },

运行npm run lint这个命令进行eslint校验;

集成editorconfig

• 在项目根目录下创建配置文件.editorconfig

#http://editorconfig.org

root = true

[*] # 表示所有文件适用
charset = utf-8
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = false
indent_style = space
indent_size = 2

[*.md]
trim_trailing_whitespace = false
max_line_length = off

集成Prettier

简介

Prettier是一个专注于代码格式化的工具。Prettier只关注格式化，并不具有lint检查语法等能力。它通过解析代码并匹配自己的一套规则，来强制执行一致的代码展示格式。

安装Prettier

npm install prettier -D

• 在项目根目录下创建配置文件.prettierrc和.prettierignore

// .prettierrc
{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false
}

// .prettierignore
/build/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

添加命令进行Prettier检测

在package.json中添加如下命令：

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject",
    "prettier": "prettier --write ."
  },

运行npm run prettier这个命令进行prettier校验;