VSCode怎么用? 史上超全vscode配置使用教程
8、Prettier
比Beautify更好用的代码格式化插件
可以配置.prettierc.js文件,配合eslint、git hooks 一起使用,提升项目代码的规范性
module.exports = { // 一行最多 100 字符 printWidth: 100, // 不使用缩进符,而使用空格 useTabs: false, // 使用 4 个空格缩进 tabWidth: 4, tabSize: 4, // 行尾需要有分号 semi: true, // 使用单引号 singleQuote: true, // 对象的 key 仅在必要时用引号 quoteProps: 'as-needed', // jsx 不使用单引号,而使用双引号 jsxSingleQuote: false, // 末尾不需要逗号 'es5' none trailingComma: 'es5', // 大括号内的首尾需要空格 bracketSpacing: true, // jsx 标签的反尖括号需要换行 jsxBracketSameLine: false, // 箭头函数,只有一个参数的时候,也需要括号 arrowParens: 'always', // 每个文件格式化的范围是文件的全部内容 rangeStart: 0, rangeEnd: Infinity, // 不需要写文件开头的 @prettier requirePragma: false, // 不需要自动在文件开头插入 @prettier insertPragma: false, // 使用默认的折行标准 proseWrap: 'preserve', // 根据显示样式决定 html 要不要折行 htmlWhitespaceSensitivity: 'css', // 换行符使用 lf 结尾是 \n \r \n\r auto endOfLine: 'lf', };
9、code runner
直接运行.js等文件,在控制台输出结果
点击右上角的运行按钮
Vue插件
vetur
语法高亮、智能感知、Emmet等
VueHelper
snippet代码片段
volar
开发vue2的时候使用vetur 帮我们提供良好的代码智能提示,但使用vue3的时候 vetur 并不能给我们提供良好的代码提示,所以volar顺应而生。与vetur相同,volar是一个针对vue的vscode插件,不过与vetur不同的是,volar提供了更为强大的功能(使用的时候需要把vetur 设置为禁用状态,或者直接卸载)
还可以配合TypeScript Vue Plugin (Volar)一起使用
提供了编辑器快捷分割和vite预览功能
点击右上方三角代码将切成两块script style是一块template是一块
点击vite 图标还支持快速预览功能
其它插件
1、CSScomb
CSS 书写顺序规则,这里我推荐腾讯 AollyTeam 团队的规范:
简单说下这个插件怎么用:
在项目的根目录下创建一个名为csscomb.json的文件,然后添加一些配置项。也可以将配置项写入项目的 package.json 文件中的 csscombConfig 字段。
至于添加的配置项,CSScomb 提供了示例配置文件:
其中的 sort-order 就是 CSS 属性书写顺序,可以按照自己遵循的规范设置,所以我直接替换成了腾讯的。
2、Turbo Console Log
快捷添加 console.log,一键 注释 / 启用 / 删除 所有 console.log。这也是我最常用的一个插件
简单说下这个插件要用到的快捷键:
ctrl + alt + l 选中变量之后,使用这个快捷键生成 console.log alt + shift + c 注释所有 console.log alt + shift + u 启用所有 console.log alt + shift + d 删除所有 console.log
3、GitLens
详细的 Git 提交日志。
Git 重度使用者必备,尤其是多人协作时:哪一行代码,何时、何人提交都有记录。
妈妈再也不用担心我背锅了!
相关文章
深入讲解VsCode各场景高级调试与使用技巧 代码编写效率提升2倍
VSCode是一款开源免费的跨平台文本编辑器,它的可扩展性和丰富的功能使得它成为了许多程序员的首选编辑器,在本文中,我将分享一些VSCode的使用技巧,帮助您更高效地使用它2023-12-22- 如何高效地使用vscode插件?Visual Studio Code中可以自己安装一些插件,提高工作效率,下面我们就来看看vscode插件相关教程2023-12-22
vscode有哪些插件好用? vscode部分插件的使用方法
vscode有哪些插件好用?vscode中有很多插件,这些插件该怎么用呢?下面我们就来看看vscode部分插件的使用方法2023-12-22- vscode左下角显示大纲?vscode中想要设置显示大纲,在哪里设置呢?下面我们就来看看vscode显示所有函数方法2023-12-22
VScode无法显示跳转到定义怎么解决? vscode无法跳转定义的原因及解决方
VScode无法显示跳转到定义怎么解决?vscode无法跳转定义的原因及解决方法2023-12-22VSCode如何跳转到指定函数? vscode函数跳转快捷键介绍
VSCode如何跳转到指定函数?VSCode文档想要跳转到指定函数的定义或引用位置,该怎么操作呢?下面我们就来看看vscode函数跳转快捷键介绍2023-12-22vscode里的终端不能执行命令怎么办? vscode终端无法正常执行命令解决办
vscode里的终端不能执行命令怎么办?本文将从多个角度来分析这个问题,并提供相应的解决方法2023-12-09VS Code 1.85发布:新增浮动编辑器窗口/Copilot 可解释 Rust 代码等
微软发布 VS Code 1.85,这个版本主要添加了浮动编辑器窗口、改善无障碍视图工作流程,精细化扩展更新控制,并更新了 GitHub Copilot 功能2023-12-09vscode出现event=>怎么取消? vsCode的@click方法显示一个event=>
今天我们来看看解决 VSCode 中组件输入点击事件 @click 后自动弹出“$event =>” 的问题的图文教程,详细请看下文介绍2023-11-29VSCode和WebStorm哪个更优秀?两款强大的编辑器对比介绍
VSCode和WebStorm哪个更优秀?这两款编辑器都很不错,他们各自有什么优缺点?该怎么选择呢?下面我们就来看看vscode和webstorm的区别对比介绍2023-11-29
最新评论