vscode的插件prettier配置
插件
首先安装vscode的插件prettier-vscode
安装成功后,编辑器默认的格式化处理就会被prettier代替, 默认快捷键是alt + shift + f
setting.json中配置
插件安装成功后,编辑器的配置setting.json会出现prettier插件的相关配置节点,同时也能看到一些默认的配置信息。
可以针对个人或团队喜好修改一些编辑器的全局配置,实际项目使用当中比较推荐用配置文件.prettierrc的方式进行针对性的配置,方便团队协作使用。
配置文件的选项可以参考官网: Configuration File · Prettier
{// 文件保存自动格式化"editor.formatOnSave": true,// 格式化插件设置为 prettier"[html]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[typescript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[javascriptreact]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[typescriptreact]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[less]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[css]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[json]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[jsonc]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"editor.codeActionsOnSave": {}
}
prettier配置
项目级的配置,在项目根目录添加配置文件prettier.config.js 或者 .prettierrc.js
module.exports = {printWidth: 100,tabWidth: 2, // 超过最大值换行semi: false, // 结尾不用分号singleQuote: true, // 使用单引号disableLanguages: ["vue"], // 不格式化vue文件,vue文件的格式化单独设置htmlWhitespaceSensitivity: "ignore",
}
/* prettier的配置 */
"prettier.printWidth"
: 100,
// 超过最大值换行
"prettier.tabWidth"
: 4,
// 缩进字节数
"prettier.useTabs"
:
false
,
// 缩进不使用tab,使用空格
"prettier.semi"
:
true
,
// 句尾添加分号
"prettier.singleQuote"
:
true
,
// 使用单引号代替双引号
"prettier.proseWrap"
:
"preserve"
,
// 默认值。因为使用了一些折行敏感型的渲染器(如GitHub comment)而按照markdown文本样式进行折行
"prettier.arrowParens"
:
"avoid"
,
// (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid:省略括号
"prettier.bracketSpacing"
:
true
,
// 在对象,数组括号与文字之间加空格 "{ foo: bar }"
"prettier.disableLanguages"
: [
"vue"
],
// 不格式化vue文件,vue文件的格式化单独设置
"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.trailingComma"
:
"es5"
,
// 在对象或数组最后一个元素后面是否加逗号(在ES5中加尾逗号)
"prettier.tslintIntegration"
:
false
// 不让prettier使用tslint的代码格式进行校验
"trailingComma"
:
"none"
// 函数最后不需要逗号
代码自动保存后自动格式化
https://baijiahao.baidu.com/s?id=1704599223959464441&wfr=spider&for=pc
vscode的插件prettier配置相关推荐
- vscode 格式化插件以及配置
vscode 格式化插件以及配置: vscode常用插件: Beautify Eslint Vetur 进入setting页面点击如图红框进入,把下面的js代码粘贴进入就好了. 点击左下角的这只进入设 ...
- vscode常用插件与配置
分享一下本人目前正在使用的一套超级舒服的Vs Code插件与配置(只有开发写代码时用的,没有摸鱼时用的),每一个插件的功能就不一一介绍了,直接上菜!!! 第一屏插件 第二屏插件 settings.js ...
- VSCode常用插件及配置修改
插件 marketplace 官网top插件 CodeRunner 运行代码(各种语言的代码都可以运行,前提是电脑中安装好了开发环境,配置了环境变量). open in browser Alt+B在浏 ...
- vscode安装插件以及配置anaconda
安装vscode之后,需要安装一些插件 python ,c/c++,CodeRunner,TabNine(自动补全) ,Bracket Pair Colorizer(匹配彩色括号),chinese(s ...
- VScode 结局插件prettier和vetur格式化冲突
先上配置代码 {"workbench.iconTheme": "vscode-icons","workbench.startupEditor" ...
- [vscode] 推荐插件及配置
插件 必备 Remote-SSH Python Plance C/C++ Git Graph markdown 相关 markdownlint markdown all in one 可选 Inden ...
- 利用vscode stylelint插件实现ctrl+s自动格式化vue项目中的css、scss
vscode stylelint使用 1. vscode stylelint插件安装及配置 vscode stylelint插件版本 vscode中配置stylelint和开启自动修复 2. 安装st ...
- vscode自动修复eslint规范的插件及配置
在开发大型项目中,经常都是需要多人合作的.相信大家一定都非常头疼于修改别人的代码的吧,而合理的使用eslint规范可以让我们在代码review时变得轻松,也可以让我们在修改小伙伴们的代码的时候会更加清 ...
- webpack5 + webpack-chain 构建一个大型应用系列 2(附 vscode 跟 prettier 配置)
上一篇:一步步从零开始用 webpack 搭建一个大型项目 笔者使用了 webpack5 将项目进行了重构,并全程使用的 webpack-chain 来配置 webpack,每个功能也都是独立文件,可 ...
- vscode插件及配置
温馨提示:如果懒得看后面的内容,点这个链接也行, 必备插件yyds vscode必备插件 基础插件Chinese 中文包open in browser 在浏览器打开Auto Close Tag 自动闭 ...
最新文章
- Mini音乐播放器【简单版】(附源码)
- ASP.NET 5 RC 1:UrlRouting 设置(不包含MVC6的UrlRouting设置)
- c语言窗口程序 画圆,C语言画圆问题。怎么跳过画图界面直接出来了?
- c语言不定长数组_学习C语言这三块“硬骨头”不搞定学了也是白学
- 了解冒泡排序选择排序
- jdk12 jdk1.8_JDK 12的Files.mismatch方法
- ES2015 中的函数式Mixin
- 前端学习(1221):使用过滤器格式化日期
- LeetCode 1871. 跳跃游戏 VII(贪心)
- Codeblocks 开发板调试简单教程
- 信安精品课:第7章访问控制技术原理与应用精讲笔记
- AndroidStudio安卓原生开发_UI高级_自定义主题和样式---Android原生开发工作笔记129
- UVA 10340 - All in All
- 目录代码php_php获取某个目录大小的代码
- 单总线结构CPU数据通路
- Offset commit failed with a retriable exception. You should retry committing the latest consumed off
- IDEA中enter键无法换行
- 让你心动的20句励志文案
- vb3.0 升级vb6.0_将VB6升级到VB.NET(性能改进)
- 蓝桥杯 算法练习 数字游戏
热门文章
- 咸鱼购买小米红米有锁机-完美解锁机有什么区别?MIUI解锁机升级系统
- 向往的生活之鸿蒙传承,《向往的生活5》播放量破6.43亿,张艺兴功劳大,《跑男》比不了...
- 立方人物|吴胜男律师:一位温而不沸的90后执行主任
- HackTheBox-Spider WP
- 用了服务器后网站统计代码被劫持,网站劫持代码,网站被劫持怎么办 | 帮助信息-动天数据...
- html5苹果手机视频不自动播放,HTML5 解决苹果手机不能自动播放音乐问题
- multisimbcd码_8421BCD码加法器报告1
- 初一计算机课程表,初中课程表空白表格
- It has been compressed and nested jar files must be stored without compression
- 基于Python飞机票销售系统 毕业设计-附源码141432