vite+ts+vue3 prettier.config.js 不生效问题解决

vite+ts+vue3 prettier.config.js 不生效问题解决

我在做项目的时候 我发现 我的vscode prettier插件 坏了 我自动格式化代码也开了 就是不给我格式化,

我已经写了prettier.config.js这个配置 也 npm i prettier 下载了就是不生效 后来我发现是因为 这个package.json 里的 “type”: “module”, 导致的因为你的项目被创建为 ES module。你可以看下 package.json,

里面应该有 type: module 的项目,于是 .js 被默认为使用了 ES module 规范,如果自动生成的配置文件使用了 CommonJS,就会出错。

cjs 的 js 会告诉 node.js 它使用了 CommonJS 规范,所以就不会出错。所以我们将prettier.config.js改为prettier.config.cjs即可**

我的prettier.config.cjs配置如下

module.exports = {
  // 一行最多 500 字符
  printWidth: 500,
  // tab 健的空格数
  tabWidth: 2,
  // 不使用 tab 格式化
  useTabs: false,
  // 不加分号
  semi: true,
  // vue script和style标签中是否缩进,开启可能会破坏编辑器的代码折叠
  vueIndentScriptAndStyle: true,
  // 单引号
  singleQuote: true,
  //object对象中key值是否加引号
  quoteProps: 'as-needed',
  //object对象里面的key和value值和括号间的空格
  bracketSpacing: true,
  //尾部逗号设置,es5是尾部逗号兼容es5,none就是没有尾部逗号,all是指所有可能的情况,需要node8和es2017以上的环境
  trailingComma: 'none',
  //箭头函数单个参数的情况是否省略括号,默认always是总是带括号,avoid是单个参数不带括号
  arrowParens: 'always',
  //自当插入pragma到已经完成的format的文件开头
  insertPragma: false,
  //格式化有特定开头编译指示的文件 比如下面两种
  requirePragma: false,
  //文章换行,默认情况下会对你的markdown文件换行进行format会控制在printwidth以内
  proseWrap: 'never',
  // html中的空格敏感性 
  htmlWhitespaceSensitivity: 'strict',
  //行尾换行符,默认是lf
  endOfLine: 'auto',
};

官方更多配置如下

module.exports = {
  // 1.一行代码的最大字符数,默认是80(printWidth: )
  printWidth: 80,
  // 2.tab宽度为2空格(tabWidth: )
  tabWidth: 2,
  // 3.是否使用tab来缩进,我们使用空格(useTabs: )
  useTabs: false,
  // 4.结尾是否添加分号,false的情况下只会在一些导致ASI错误的其工况下在开头加分号,我选择无分号结尾的风格(semi: )
  semi: false,
  // 5.使用单引号(singleQuote: )
  singleQuote: true,
  // 6.object对象中key值是否加引号(quoteProps: "")as-needed只有在需求要的情况下加引号,consistent是有一个需要引号就统一加,preserve是保留用户输入的引号
  quoteProps: 'as-needed',
  // 7.在jsx文件中的引号需要单独设置(jsxSingleQuote: 
  jsxSingleQuote: false,
  // 8.尾部逗号设置,es5是尾部逗号兼容es5,none就是没有尾部逗号,all是指所有可能的情况,需要node8和es2017以上的环境。(trailingComma: "")
  trailingComma: 'es5',
  // 9.object对象里面的key和value值和括号间的空格(bracketSpacing: )
  bracketSpacing: true,
  // 10.jsx标签多行属性写法时,尖括号是否另起一行(jsxBracketSameLine: )
  jsxBracketSameLine: false,
  // 11.箭头函数单个参数的情况是否省略括号,默认always是总是带括号(arrowParens: "")
  arrowParens: 'always',
  // 12.range是format执行的范围,可以选执行一个文件的一部分,默认的设置是整个文件(rangeStart:   rangeEnd: 
  rangeStart: 0,
  rangeEnd: Infinity,
  // 18. vue script和style标签中是否缩进,开启可能会破坏编辑器的代码折叠
  vueIndentScriptAndStyle: false,
  // 19.    endOfLine: "" 行尾换行符,默认是lf,
  endOfLine: 'lf',
  // 20.embeddedLanguageFormatting: "off",默认是auto,控制被引号包裹的代码是否进行格式化
  embeddedLanguageFormatting: 'off',
}

// 14. requirePragma: ,格式化有特定开头编译指示的文件 比如下面两种
// 15.insertPragma:  自当插入pragma到已经完成的format的文件开头
// 16. proseWrap: "" 文章换行,默认情况下会对你的markdown文件换行进行format会控制在printwidth以内
// 13. 指定parser,因为pretter会自动选择,所以一般不用指定(parser: ""  parser: require("./my-parser"))
// "babel" (via @babel/parser) Named "babylon" until v1.16.0
// "babel-flow" (same as "babel" but enables Flow parsing explicitly to avoid ambiguity) First available in v1.16.0
// "babel-ts" (similar to "typescript" but uses Babel and its TypeScript plugin) First available in v2.0.0
// "flow" (via flow-parser)
// "typescript" (via @typescript-eslint/typescript-estree) First available in v1.4.0
// "espree" (via espree) First available in v2.2.0
// "meriyah" (via meriyah) First available in v2.2.0
// "css" (via postcss-scss and postcss-less, autodetects which to use) First available in v1.7.1
// "scss" (same parsers as "css", prefers postcss-scss) First available in v1.7.1
// "less" (same parsers as "css", prefers postcss-less) First available in v1.7.1
// "json" (via @babel/parser parseExpression) First available in v1.5.0
// "json5" (same parser as "json", but outputs as json5) First available in v1.13.0
// "json-stringify" (same parser as "json", but outputs like JSON.stringify) First available in v1.13.0
// "graphql" (via graphql/language) First available in v1.5.0
// "markdown" (via remark-parse) First available in v1.8.0
// "mdx" (via remark-parse and @mdx-js/mdx) First available in v1.15.0
// "html" (via angular-html-parser) First available in 1.15.0
// "vue" (same parser as "html", but also formats vue-specific syntax) First available in 1.10.0
// "angular" (same parser as "html", but also formats angular-specific syntax via angular-estree-parser) First available in 1.15.0
// "lwc" (same parser as "html", but also formats LWC-specific syntax for unquoted template attributes) First available in 1.17.0
// "yaml" (via yaml and yaml-unist-parser) First available in 1.14.0

// 17. htmlWhitespaceSensitivity: "" html中的空格敏感性

// 针对不同文件或目录设置不同配置的方法,json格式例子
// {
//   "semi": false,
//   "overrides": [
//     {
//       "files": "*.test.js",
//       "options": {
//         "semi": true
//       }
//     },
//     {
//       "files": ["*.html", "legacy/**/*.js"],
//       "options": {
//         "tabWidth": 4
//       }
//     }
//   ]
// }


你可能感兴趣的:(javascript,开发语言,ecmascript)