欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  互联网

prettier自动格式化去换行的实现代码

程序员文章站 2022-03-14 20:17:14
插件新建 .prettierrc 文件在根目录,里面写上这个第一个是超出800字符换行,第二个是单引号,第三个是结尾不要分号vscode里面的设置文件settings。json代码{ // vscod...

插件

prettier自动格式化去换行的实现代码
prettier自动格式化去换行的实现代码

新建 .prettierrc 文件在根目录,里面写上这个
第一个是超出800字符换行,第二个是单引号,第三个是结尾不要分号

prettier自动格式化去换行的实现代码

vscode里面的设置文件settings。json代码

{
 // vscode默认启用了根据文件类型自动设置tabsize的选项
 "editor.detectindentation": false,
 // 重新设定tabsize
 "editor.tabsize": 2,
 // #每次保存的时候自动格式化
 "editor.formatonsave": true,
 // // 添加 vue 支持
 "eslint.validate": [
  "javascript",
  "javascriptreact",
  {
   "language": "vue",
   "autofix": true
  }
 ],
 "eslint.autofixonsave": true,
 "vetur.validation.template": false,
 // #让prettier使用eslint的代码格式进行校验
 "prettier.eslintintegration": true,
 // #去掉代码结尾的分号
 "prettier.semi": false,
 // #使用带引号替代双引号
 "prettier.singlequote": true,
 // #让函数(名)和后面的括号之间加个空格
 "javascript.format.insertspacebeforefunctionparenthesis": true,
 // #这个按用户自身习惯选择
 "vetur.format.defaultformatter.html": "js-beautify-html",
 // #让vue中的js按编辑器自带的ts格式进行格式化
 "vetur.format.defaultformatter.js": "vscode-typescript",
 "vetur.format.defaultformatteroptions": {
  "js-beautify-html": {
   // 换行
   // "wrap_attributes": "force-aligned"
   // 不换行
   "wrap_attributes": "aligned-multiple"
  }
 },
 // 格式化stylus, 需安装manta's stylus supremacy插件
 "stylussupremacy.insertcolons": false, // 是否插入冒号
 "stylussupremacy.insertsemicolons": false, // 是否插入分好
 "stylussupremacy.insertbraces": false, // 是否插入大括号
 "stylussupremacy.insertnewlinearoundimports": false, // import之后是否换行
 "stylussupremacy.insertnewlinearoundblocks": false, // 两个选择器中是否换行
 "auto-rename-tag.activationonlanguage": [
  "*"
 ],
 "window.zoomlevel": 0,
 // esli弹框报错
 "devdependencies": {
  "babel-eslint": "^10.0.3",
  "eslint": "^4.15.0",
  "eslint-config-airbnb": "^16.1.0",
  "eslint-plugin-jsx-a11y": "^6.0.3",
  "eslint-plugin-react": "^7.12.1",
  "eslint-config-google": "^0.9.1",
  "eslint-config-standard": "^10.2.1",
  "eslint-plugin-html": "^4.0.1",
  "eslint-plugin-import": "^2.8.0",
  "eslint-plugin-node": "^5.2.1",
  "eslint-plugin-promise": "^3.6.0",
  "eslint-plugin-standard": "^3.0.1"
 },
 "http.proxyauthorization": null,
 "eslint.migration.2_x": "off",
 "workbench.editorassociations": [],
 "eslint.codeaction.disablerulecomment": {},
 "eslint.codeaction.showdocumentation": {},
 "editor.suggest.snippetspreventquicksuggestions": false,
 "files.associations": {
  "*.cjson": "jsonc",
  "*.wxss": "css",
  "*.wxs": "javascript"
 },
 "emmet.includelanguages": {
  "wxml": "html"
 },
 "minapp-vscode.disableautoconfig": true,
 "editor.codeactionsonsave": null,
 "[vue]": {
  "editor.defaultformatter": "esbenp.prettier-vscode"
 },
 "[jsonc]": {
  "editor.defaultformatter": "vscode.json-language-features"
 },
 "[javascript]": {
  "editor.defaultformatter": "esbenp.prettier-vscode"
 }
}

保存,打开一个后缀名为.vue文件,右键文档格式方式

prettier自动格式化去换行的实现代码

点默认格式化程序,再点vetur

prettier自动格式化去换行的实现代码
prettier自动格式化去换行的实现代码

大功告成,,ctrl+s自动格式化,这是不换行的方式

后缀名为 .js,用上面同样步骤,但是默认值用prettier

prettier自动格式化去换行的实现代码

喜欢标签换行用这个
打开vscode设置文件settings。json,找到,想用哪个打开就好,不用就注释

prettier自动格式化去换行的实现代码

总结

到此这篇关于prettier自动格式化去换行的实现代码的文章就介绍到这了,更多相关prettier格式化换行内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!