.prettierrc文件常见配置，如：printWidth、semi、singleQuote

 

 一、文件

Settings.json


二、路径

  设置--->用户（常用设置）【文本编辑器】上面--->在setting.json中编辑

 1.prettierrc配置参考

{
	//每行最多多少个字符换行
	"printWidth": 100, 
    // tab缩进大小,默认为2
    "tabWidth": 4,
    // 使用tab缩进，默认false
    "useTabs": false,
    // 使用分号, 默认true
    "semi": false,
    // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
    "singleQuote": false,
    // 行尾逗号,默认none,可选 none|es5|all
    // es5 包括es5中的数组、对象
    // all 包括函数对象等所有可选
    "TrailingCooma": "all",
    // 对象中的空格 默认true
    // true: { foo: bar }
    // false: {foo: bar}
    "bracketSpacing": true,
    // JSX标签闭合位置 默认false
    // false: <div
    //          className=""
    //          style={{}}
    //       >
    // true: <div
    //          className=""
    //          style={{}} >
    "jsxBracketSameLine": false,
    // 箭头函数参数括号 默认avoid 可选 avoid| always
    // avoid 能省略括号的时候就省略 例如x => x
    // always 总是有括号
    "arrowParens": "avoid"
}

2.

{
  "files.eol": "\n",
  "typescript.preferences.quoteStyle": "single",
  "javascript.preferences.quoteStyle": "single"
  // tab 大小为2个空格
  "editor.tabSize": 2,
  // 编辑器换行
  "editor.wordWrap": "off",
  // 保存时格式化
  "editor.formatOnSave": false,
  // 开启 vscode 文件路径导航
  "breadcrumbs.enabled": true,
  // prettier 设置语句末尾不加分号
  "prettier.semi": false,
  // prettier 设置强制单引号
  "prettier.singleQuote": true,
  // 选择 vue 文件中 template 的格式化工具
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // vetur 的自定义设置
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "aligned-multiple"
    },
    "prettier": {
      "singleQuote": true,
      "semi": false,
      "printWidth": 100,
      "wrapAttributes": false,
      "sortAttributes": false
    }
  }
}

3.

{
  "[html]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "[javascript]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "editor.tabSize": 2,
  "eslint.autoFixOnSave": true, // 每次保存的时候将代码按eslint格式进行修复
  "prettier.eslintIntegration": true, //让prettier使用eslint的代码格式进行校验
  "prettier.semi": false, //去掉代码结尾的分号
  "prettier.singleQuote": true, //使用带引号替代双引号
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
  "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
  "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "auto" //"force-aligned" //属性强制折行对齐
    }
  },
  "[jsonc]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "javascript.format.insertSpaceBeforeFunctionParenthesis": false, //  #不让函数(名)和后面的括号之间加个空格
  "vetur.validation.template": false,
  "[json]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "html.format.wrapAttributes": "preserve",
  "search.followSymlinks": false // 阻止iview报错
}