Skip to main content

配置代码格式化

eslint​

安装 ESLint 解析 TypeScript 的依赖

  • eslint：javascript 代码检测工具，使用 espree 解析器
  • @typescript-eslint/parser：将 TypeScript 转换为 ESTree，使 eslint 可以识别
  • @typescript-eslint/eslint-plugin：只是一个可以打开或关闭的规则列表
yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

2.自定义配置，添加配置文件 .eslintrc.js​

module.exports = {
  parser: {},  // 解析器
  extends: [], // 继承的规则 [扩展]
  plugins: [], // 插件
  rules: {}    // 规则
};

plugin 与 extend 的区别：

extend 提供的是 eslint 现有规则的一系列预设 而 plugin 则提供了除预设之外的自定义规则，当你在 eslint 的规则里找不到合适的的时候就可以借用插件来实现了 为了使配置能够正常运行，我们需要配置 解析器、插件、规则集等。

module.exports = {
  parser: "@typescript-eslint/parser",
  extends: ["plugin:@typescript-eslint/recommended"],
  plugins: ["@typescript-eslint"],
  rules: {}
};

我们已经告诉 ESLint 怎样正确解析 TypeScript 代码，并且使用了一组推荐的插件规则（extends 字段选项中的配置）

1.例子:接下来我们将为 React 添加基本规则​

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

修改.eslintrc.js 文件

module.exports = {
  ...
  extends: ["plugin:react/recommended", "prettier"], // 加了prettier
  ...
}

添加.prettierrc.js 文件

// 根目录下，内容可配置，详细看官方文档 https://prettier.io/docs/en/options.html
module.exports = {
  printWidth: 80, //一行的字符数，如果超过会进行换行，默认为80
  tabWidth: 2, //一个tab代表几个空格数，默认为2
  semi: true, // 是否有冒号结尾，是
  singleQuote: false, // 是否单引号，是
  trailingComma: 'none',
};

在此，只要使用编辑器自带的格式化工具，比如右键 - 格式化文本，或者设置了编辑器auto format on save，就会按照要求自动格式化了

PS: 建议同级添加ignore文件.prettierignore，内容如下：

**/node_modules/*
build

安装vsCode插件-setting 配置​

Prettier
eslint
"editor.formatOnSave": true,

其他vscode配置： user settings 与 workspace settings：user settings 里面是更通用的设置，workspace settings 是跟随项目存在，可以做到团队统一。

"eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    }
]

不生效,再来​

yarn add prettier eslint-config-prettier --dev

这个生效​

https://blog.csdn.net/weixin_59141333/article/details/121525759

yarn add --dev --exact prettier

.prettierrc.js

module.exports = {
  tabWidth: 2, // 一个tab代表几个空格数，默认就是2
  useTabs: false, // 启用tab取代空格符缩进，默认为false
  semi: true, // 行尾是否使用分号，默认为true
  singleQuote: true, // 字符串是否使用单引号，默认为false，设true，即单引号
  quoteProps: 'as-needed', // 给对象里的属性名是否要加上引号，默认为as-needed，即根据需要决定，如果不加引号会报错则加，否则不加
  trailingComma: 'es5', // 是否使用尾逗号，有三个可选值"<none|es5|all>"
  jsxSingleQuote: true, // 在jsx里是否使用单引号，true 表示使用单引号
  trailingComma: 'es5', // 每个键值对后面是否一定有尾随逗号，默认es5，保持默认即可
  bracketSpacing: true, // 对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
}
// 这样配置完后，如果保存还是不能格式化，可能是vscode的默认formatter不是prettier。
// 这时候可以按CTRL + SHIFT + P,输入format然后选择Format Document，
// 点击弹出框的按钮configure,然后选择prettier.

创建 .prettierignore 文件内容如下：​

build
coverage

如果想要配置 eslint 格式化​

在VSCODE的User/setting.json文件中有如下配置
"editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
 },
表示保存文件这个行为触发的是eslint的规则
再看执行命令Format Document触发的规则，我们先右键选择Format Document With...来查看默认用的是哪个格式化工具，如图所示，可以看到默认用的是Prettier，到这里就很清晰了，Prettier的配置如果和eslint的配置不一样，那么执行Format Document就肯定和执行

再看执行命令Format Document触发的规则，我们先右键选择Format Document With...来查看默认用的是哪个格式化工具,Prettier的配置如果和eslint的配置不一样

1.3 创建 .prettierignore 文件内容如下：
build
coverage

vscode 中的 prettier 检查如何设置才能即时生效​

使用 ctrl+shift+p(cmd+shift+p), 执行 reload window

yarn add prettier eslint-config-prettier --dev

yarn add -D prettier