vscode配置prettier格式化工具

看到网上vscode配置prettier的方式五花八门，鄙人也是经过多次尝试才摸索出一种方法至少能使用。

在vscode中搜索prettier插件基本上是第一个。安装好了以后在项目中配置.prettierrc文件这个文件与package.json同级。这个文件就是你要定义的规则。配置好了以后按住 shift+alt+f 理论上是可以格式化代码的。但是在实际操作中，会让我们选择以何种方式格式化（这里亦可能是我之前配置了别的格式化导致的），选择带有prettier的那个。选好了以后在vscode的设置中打开settings.json文件添加如下两条：

"editor.formatOnType":true,
"editor.formatOnSave": true,

这样每次保存的时候就能自动格式化代码了。如果报错“Invalid prettier configuration file detected. See log for details”首先要检查.prettierrc文件中配置项是否重复，如果没有重复可以使用命令

npm install --save-dev --save-exact prettier

最后附上.prettierrc文件的配置项

{
  "printWidth": 100, // 超过最大值换行 
    "overrides": [
        {
            "files": ".prettierrc",
            "options": { "parser": "json" }
        }
    ],
  "tabWidth": 4, // 缩进字节数 
  "useTabs": false, // 缩进不使用tab，使用空格 
  "semi": true, // 句尾添加分号 
  "singleQuote": true, // 使用单引号代替双引号 
  "proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行 
  "arrowParens": "avoid", // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号 
  "bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }" 
  "disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化单独设置 
  "endOfLine": "auto", // 结尾是 \n \r \n\r auto
  "eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验 
  "htmlWhitespaceSensitivity": "ignore",
  "ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中  
  "jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
  "jsxSingleQuote": false, // 在jsx中使用单引号代替双引号  "prettier.parser": "babylon", // 格式化的解析器，默认是babylon
  "requireConfig": false, // Require a 'prettierconfig' to format prettier  
  "stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验  
  "trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
  "prettier.tslintIntegration": false // 不让prettier使用tslint的代码格式进行校验
}

注意在.prettierrc文件使用如上配置时要把所有注释删除。

最后编辑于：2020.05.20 16:19:35