常用插件:
如果喜欢中文就安装中文,如果不喜欢就自动忽略.
1、chinese
2、Open-In-Browser
这个是必须安装的 打开浏览器看效果使用的 快捷键是alt+b
3、Prettier
Prettier 是目前 Web 开发中最受欢迎的代码格式化程序。安装了这个插件,它就能够自动应用 Prettier,并将整个 JS 和 CSS 文档快速格式化为统一的代码样式。如果你还想使用 ESLint,那么还有个 Prettier – Eslint 插件,你可不要错过咯!
快捷键是 shift+alt+f
ps:默认是双引号 如果项目需要将双引号设置为单引号 可以查看我的另外一篇博客地址自行去设置
https://blog.csdn.net/weixin_43595461/article/details/117514752?spm=1001.2014.3001.5502
4、ESlint
ESlint接管原声js提示,可以自定制体会规则。这个比较高玩
5、Color Info
这个便捷的插件,将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标,就可以预览色块中色彩模型的(HEX、 RGB、HSL 和 CMYK)相关信息了。
6、TODO Highlight
这个插件能够在你的代码中标记出所有的 TODO 注释,以便更容易追踪任何未完成的业务。在默认的情况下,它会查找 TODO 和 FIXME 关键字。当然,你也可以添加自定义表达式。
7、Color Highlight
直接可以在页面中查看都是什么样色 正如上图所示 真的非常好用
8、vscode-icons
这个主题其实还不错
9、HTML CSS Support
让HTML标签上写class智能提示当前项目所支持的样式
10、JQuery Code Snippets
jquery提示工具 用到jq的时候再安装吧,现在安装起来提示样式的内容太多了
11、Path Intellisense
自动路径补全、默认不带这个功能
12、Npm Intellisense
require 时的包提示
13、Document this
Js的注释模板
14、Typings Installer
安装vscode 的代码提示依赖库,基于typtings的,比如提示angular或者jQuery只能感知、至于什么是typtings自己去百度。
15、Bootstrap 4 Sinnpet
常用bootstrap的可以下
16、Auto Rename Tag
修改html标签,自动帮你完成尾部闭合标签的同步修改,和webstorm一样。
17、JavaScript Atom Grammar
使用atom风格的语法高亮、对于习惯浏览atom风格代码高亮的人实用。
这个看个人需求吧。不是一定需要下载的
18、code runner
这个是好东西,且用且珍惜。
19、Easy less
使用less的盆友一定要安装这个,不要安装错了。 也有sass等等...自行百度
20、Vetur —— 语法高亮、智能感知、Emmet等
包含格式化功能, Alt+Shift+F (格式化全文),Ctrl+K Ctrl+F(格式化选中代码,两个Ctrl需要同时按着)
21、Bracket Pair Colorizer
让括号拥有独立的颜色,易于区分。可以配合任意主题使用。
22、Image preview
悬停时显示图像预览
23、 koroFileheader 头部注释
效果如下图:
详细设置请跳转如下地址:
https://blog.csdn.net/weixin_43595461/article/details/117992019
24、 vscode代码片段
https://www.cnblogs.com/susu-yee/p/11533546.html
1.点击左下角设置图标,用户代码片段.
2.在搜索框里面创建 vue.json
3.在对象里面复制以下代码块 也就是复制粘贴
4.
{
"Print to console": {
"prefix": "vue",
"body": [
"<template>",
" <div>\n",
" </div>",
"</template>\n",
"<script>",
"export default {",
" data() {",
" return {\n",
" };",
" },",
" created() {\n",
" },",
" mounted() {\n",
" },",
" methods: {\n",
" }",
"};",
"</script>\n",
"<style scoped lang=\"${1:less}\">\n",
"</style>\n",
],
"description": "Create vue template"
}
}
25、 自定义代码颜色 效果+步骤如下
效果
1.点击左下角设置
2.在搜索框中输入settings 然后点击在settings.json中编辑 如下图
3.复制下面代码 这是我自己习惯的代码风格 我只把函数名的颜色变成了红色 其他没改变 如果需要改 自己可以尝试一下
"editor.tokenColorCustomizations": {
// "comments": "#82e0aa", // 注释
// "keywords": "#0a0", // 关键字
// "variables": "#EAC863", // 变量名
// "strings": "#e2d75dbd", // 字符串
"functions": "#EF3D26", // 函数名
// "numbers": "#AE81FF" // 数字
},
// 选中高亮的颜色
"workbench.colorCustomizations": {
// "editor.selectionBackground": "#aa0000"
}