vscode 针对 React 代码的保存格式化

2023-09-17

插件
配置
预览

大型前端应用React代码可读性会很差，保证格式化一致性能有效提高代码的可读性，下面是对应vscode插件以及配置的记录

插件

安装下面两个插件

Prettier - Code formatter
Prettier ESLint

配置

在应用根路径，创建文件 .vscode/settings.json，将下面配置复制进去

{
  "typescript.tsdk": "node_modules/typescript/lib",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue",
    "typescript",
    "typescriptreact"
  ],
  "stylelint.validate": [
    "css",
    "less",
    "sass",
    "scss",
    "postcss"
  ],
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "html.validate.scripts": false,
  "html.validate.styles": false,
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": false,
    "source.fixAll.tslint": false,
    "source.fixAll.stylelint": false
  },
  "prettier.semi": true,
  "prettier.singleQuote": true,
  "prettier.trailingComma": "all",
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "files.insertFinalNewline": true
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "files.insertFinalNewline": true
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "files.insertFinalNewline": true
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "files.insertFinalNewline": true
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "files.insertFinalNewline": true
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "files.insertFinalNewline": true
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "files.insertFinalNewline": true
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur",
    "files.insertFinalNewline": true
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "files.insertFinalNewline": true
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "files.insertFinalNewline": true
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "files.insertFinalNewline": true
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "files.insertFinalNewline": true
  },
  "cSpell.words": [
    "resourceerror"
  ]
}

预览

版权所有，本作品采用知识共享署名-非商业性使用 3.0 未本地化版本许可协议进行许可。转载请注明出处：https://www.wangjun.dev//2023/09/react-format-code-when-save/