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


Posted in Javascript onAugust 25, 2020

插件

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格式化换行内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
在VS2008中使用jQuery智能感应的方法
Dec 30 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
Dec 12 Javascript
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
js控制页面控件隐藏显示的两种方法介绍
Oct 09 Javascript
javascript数组详解
Oct 22 Javascript
基于jQuery实现的图片切换焦点图整理
Dec 07 Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 Javascript
js移动端图片压缩上传功能
Aug 18 Javascript
基于vue开发的在线付费课程应用过程
Jan 25 Javascript
angular 服务随记小结
May 06 Javascript
Vue使用Proxy监听所有接口状态的方法实现
Jun 07 Javascript
谈一谈vue请求数据放在created好还是mounted里好
Jul 27 Javascript
Vue中 axios delete请求参数操作
Aug 25 #Javascript
React实现轮播效果
Aug 25 #Javascript
React实现全选功能
Aug 25 #Javascript
react实现复选框全选和反选组件效果
Aug 25 #Javascript
js实现数字跳动到指定数字
Aug 25 #Javascript
js实现点击选项置顶动画效果
Aug 25 #Javascript
理解JavaScript中的对象
Aug 25 #Javascript
You might like
PHP中使用crypt()实现用户身份验证的代码
2012/09/05 PHP
PHP和javascript常用正则表达式及用法实例
2014/07/01 PHP
php中base64_decode与base64_encode加密解密函数实例
2014/11/24 PHP
PHP判断来访是搜索引擎蜘蛛还是普通用户的代码小结
2015/09/14 PHP
PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)
2015/09/22 PHP
jQuery源码分析-01总体架构分析
2011/11/14 Javascript
去掉gridPanel表头全选框的小例子
2013/07/18 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
javascript实现用户点击数量统计
2016/12/25 Javascript
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
JQuery Ajax动态加载Table数据的实例讲解
2018/08/09 jQuery
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
2018/08/31 Javascript
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
原生JS封装拖动验证滑块的实现代码示例
2020/06/01 Javascript
python安装教程 Pycharm安装详细教程
2017/05/02 Python
用Python分析3天破10亿的《我不是药神》到底神在哪?
2018/07/12 Python
flask-restful使用总结
2018/12/04 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
Python ORM编程基础示例
2020/02/02 Python
巴西女装购物网站:Eclectic
2018/04/24 全球购物
日本索尼音乐商店:Sony Music Shop
2018/07/17 全球购物
韩国最大的购物网站:Gmarket
2019/06/20 全球购物
简述数据库的设计过程
2015/06/22 面试题
中职生自荐信
2013/10/13 职场文书
计算机应用毕业生自荐信
2013/10/23 职场文书
广告学专业推荐信范文
2013/11/23 职场文书
21岁生日感言
2014/02/27 职场文书
生产部厂长助理职位说明书
2014/03/03 职场文书
文员岗位职责范本
2014/03/08 职场文书
职员竞岗演讲稿
2014/05/14 职场文书
师德承诺书2015
2015/04/28 职场文书
大国崛起英国观后感
2015/06/02 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript