webapck5 学习12 -- 代码风格统一

多人开发的时候，我们需要保持代码风格的统一, 一般我们会采用 eslint + prettier

eslint 主要进行 js 代码检查，prettier 进行代码格式化，相互配合

webpack

在 webpack 中，为了保持风格的统一，一般我们可以在编译的时候进行代码检查，如果有风格方面的问题，就会提示错误

依赖安装

npm i eslint babel-eslint eslint-webpack-plugin eslint-plugin-import eslint-plugin-jsx-a11y eslint-import-resolver-webpack eslint-config-prettier eslint-plugin-prettier eslint-plugin-react -D

新建 .eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true, // 兼容 import export 等 es6 语法
    node: true // 需要兼容  require 语法
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:prettier/recommended'
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 13,
    sourceType: 'module'
  },
  plugins: ['react', 'prettier'],
  rules: {
    'prettier/prettier': 'error'
    // endOfLine: 'CRLF'
  }
}

新建 .prettierrc.js

module.exports = {
    // 一行最多 80 字符
    printWidth: 80,
    // 使用 2 个空格缩进
    tabWidth: 2,
    // 不使用缩进符，而使用空格
    useTabs: false,
    // 行尾需要有分号
    semi: false,
    // 使用单引号
    singleQuote: true,
    // 对象的 key 仅在必要时用引号
    quoteProps: 'as-needed',
    // jsx 不使用单引号，而使用双引号
    jsxSingleQuote: false,
    // 末尾不需要逗号
    trailingComma: 'none',
    // 大括号内的首尾需要空格
    bracketSpacing: true,
    // jsx 标签的反尖括号需要换行
    jsxBracketSameLine: false,
    // 箭头函数，只有一个参数的时候，也需要括号
    arrowParens: 'always',
    // 每个文件格式化的范围是文件的全部内容
    rangeStart: 0,
    rangeEnd: Infinity,
    // 不需要写文件开头的 @prettier
    requirePragma: false,
    // 不需要自动在文件开头插入 @prettier
    insertPragma: false,
    // 使用默认的折行标准
    proseWrap: 'preserve',
    // 根据显示样式决定 html 要不要折行
    htmlWhitespaceSensitivity: 'css',
    endOfLine: 'auto',
    eslintIntegration: true // 优先采用 eslint 进行检验，防止eslint 与 prettier 冲突
};

新建 .prettierignore

主要是排除一些不需要代码格式检测的文件

node_modules/*
dist/*

vscode

我们在 webpack 中配置 代码检查的同时，我们平时开发也需要代码检查，这个时候就可以从编辑器插件入手

• ESLint
• Prettier - Code formatter

他们会识别项目中的 .eslintrc.js .prettierrc.js 配置，但是我们同样还需要进行一些单独的配置

在 vscode 的 settings.json 中

"prettier.requireConfig": true,
  "eslint.run": "onType", // 输入的时候，如果有错误就会立即提示出来
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true // 保存的时候会自动格式化
  },