在VScode中配置Prettier不生效的几种情况

情况一 未配置

没有指定默认格式化插件

1.右键设置默认配置项

2.在此处指定配置项

情况二 匹配文件类型失败

这种情况常出现在使用框架如vue中的js或者ts后缀文件使用无效但是在普通的js后缀文件有效

1. 通常情况下我们的VsCode都开启了自动匹配文件类型 可以在vscode的右下角的导航栏查看一些信息
2. 当开启自动检索文件类型后我们在vue中的js文件就会默认匹配为.js文件但是这个时候我们在配置setting.json中配置的vetur就没办法处理该js文件

解决:

一:手动点击右下加的的文件，修改vue里面的js文件为vue类型，而不是自动匹配的js文件

二: 不配置vetur插件格式化文件

Prettiier基本配置项

// 在json文件中配置vue文件的格式化方式，这里默认使用vuter
// 在"vetur.format.defaultFormatterOptions"配置vetur里面配置
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
   },
   
  "prettier.disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化单独设置
  "prettier.tabWidth": 2, // 缩进字节数
  "prettier.useTabs": false, // 缩进不使用tab，使用空格
  "prettier.semi": false, // 句尾添不加分号
  "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
  "prettier.arrowParens": "avoid", //  箭头函数参数只有一个时是否要有小括  号。avoid：省略括号
  "prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
  "prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto
  "prettier.eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验
  "prettier.htmlWhitespaceSensitivity": "ignore",//包裹文字时候结束标签的结尾尖括号掉到了下一行
  "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
  "prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
  "prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
  "prettier.parser": "babylon", // 格式化的解析器，默认是babylon
  "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
  "prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
  
  "prettier.tslintIntegration": false, // 不让prettier使用tslint的代码格式进行校验

    "eslint.alwaysShowStatus": true,
    "prettier.trailingComma": "none",
    //  让函数名和后面的括号之间加个空格    
    "prettier.printWidth": 300,// 每行文字个数超出此限制将会被迫换行
    "prettier.singleQuote": true,// 使用单引号替换双引号
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.ignoreProjectWarning": true,
    // 添加vue中js文件的配置插件
    "vetur.format.defaultFormatter.js": "prettier",
    "vetur.ignoreProjectWarning": true,
    "vetur.format.defaultFormatterOptions": {
       // 下面这句是指定vue中js文件的配置插件
        "js": "prettier",
        "prettier": {
            "trailingComma": "none",
            
            "singleQuote": true,
            "editor.tabSize": 2,
            "semi": false,
            "arrowParens": "avoid",
            "printWidth": 300
        },
        "js-beautify-html": {
            "wrap_attributes": false,
        },        
        
    },
             
   }