vscode使用prettier格式化代码不起作用、配置不生效的解决方法

问题描述

在某一次更新prettier插件后，发现格式化不起作用了，在vscode用户配置中怎么设置都没有效果

解决方法

1. 由于prettier插件优先使用项目根目录下的editorconfig配置文件，所以在vscode中怎么配置有没有用，如下图
   
2. 进入插件配置界面
   
3. 取消Use Editor Config的复选框，这样就不会优先使用editorconfig配置文件了
   
4. 你可以在项目根目录创建一个.prettierrc.js配置文件，prettier会自动检测到，也可以手动配置
   
5. 也可以使用vscode的用户设置或者工作区设置，看你喜欢哪一种了
   
   

推荐配置

这里贴上一个我常用的配置文件

/**
 * @see https://prettier.io/docs/en/options.html#print-width
 * @author lcm
 */
module.exports = {
  /**
   * 换行宽度，当代码宽度达到多少时换行
   * @default 80
   * @type {number}
   */
  printWidth: 80,
  /**
   * 缩进的空格数量
   * @default 2
   * @type {number}
   */
  tabWidth: 2,
  /**
   * 是否使用制表符代替空格
   * @default false
   * @type {boolean}
   */
  useTabs: false,
  /**
   * 是否在代码块结尾加上分号
   * @default true
   * @type {boolean}
   */
  semi: false,
  /**
   * 是否使用单引号替代双引号
   * @default false
   * @type {boolean}
   */
  singleQuote: true,
  /**
   * 对象属性的引号处理
   * @default "as-needed"
   * @type {"as-needed"|"consistent"|"preserve"}
   */
  quoteProps: 'as-needed',
  /**
   * jsx中是否使用单引号替代双引号
   * @default false
   * @type {boolean}
   */
  jsxSingleQuote: true,
  /**
   * 在jsx中使用是否单引号代替双引号
   * @default false
   * @type {boolean}
   */
  /**
   * 末尾是否加上逗号
   * @default "es5"
   * @type {"es5"|"none"|"all"}
   */
  trailingComma: 'none',
  /**
   * 在对象，数组括号与文字之间加空格 "{ foo: bar }"
   * @default true
   * @type {boolean}
   */
  bracketSpacing: true,
  /**
   * 把多行HTML (HTML, JSX, Vue, Angular)元素的>放在最后一行的末尾，而不是单独放在下一行(不适用于自关闭元素)。
   * @default false
   * @type {boolean}
   */
  bracketSameLine: false,
  /**
   * 当箭头函数只有一个参数是否加括号
   * @default "always"
   * @type {"always"|"avoid"}
   */
  arrowParens: 'always',
  /**
   * 为HTML、Vue、Angular和Handlebars指定全局空格敏感性
   * @default "css"
   * @type {"css"|"strict"|"ignore"}
   */
  htmlWhitespaceSensitivity: 'ignore',
  /**
   * 是否缩进Vue文件中的<script>和<style>标记内的代码。有些人(比如Vue的创建者)不使用缩进来保存缩进级别，但这可能会破坏编辑器中的代码折叠。
   * @default "always"
   * @type {"always"|"avoid"}
   */
  vueIndentScriptAndStyle: false,
  /**
   * 文件结束符
   * @default "lf"
   * @type {"lf"|"crlf"|"cr"|"auto"}
   */
  endOfLine: 'crlf',
  /**
   * 因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
   */
  proseWrap: 'never',
  // 是否使用根目录下的EditorConfig配置文件
  useEditorConfig: false,
  /**
   * HTML\VUE\JSX每行只有单个属性
   * @default true
   * @type {boolean}
   */
  singleAttributePerLine: true,
  disableLanguages: ['html']
}

写在最后

• 配置文件是有优先级的，实测：独立配置文件>vscode工作区配置>vscode用户配置，官网描述如下图，使用时请注意
  

• 每次配置文件类型的切换，建议重启一下vscode，否则可能不会生效
  如.editorconfig -> .prettierrc.js 、 .prettierrc.js -> VsCode用户设置

• 官网 - Configuration File