prettier代码格式化简易使用-526互联

项目中一般都配置有eslint，eslint负责是负责校验代码的插件，prettier负责格式化代码。

prettier下载

install i -D prettier eslint-config-prettier eslint-plugin-prettier

在项目根目录的eslint配置文件eslintrc.js中增加配置:

extends: [
  ...
  'plugin:prettier/recommended',
],

新增prettier配置文件，根目录下新增.prettierrc文件，配置自行查阅增加：

{
  "singleQuote": true, // 单引号
  "trailingComma": "all", // 在多行输入的尾逗号是否添加，不需要添加设置为 none，需要添加设置为 all
  "tabWidth": 2 // tab为2字符
}

vscode编辑器配置

settings.json（ctrl + . 打开配置，右上角找到打开设置图标）:

"editor.formatOnSave": true,
"eslint.run": "onType",
"eslint.options": {
    "extensions": [
        ".js",
        ".vue",
        ".jsx",
        ".tsx"
    ]
},
"editor.codeActionsOnSave": {
    "source.fixAll": true
}

配置完成后保存时就能自动格式化代码

参考

React项目配置ESlint总结
 如何在 React 项目中整合 Eslint 和 Prettier