目录
1.Chinese (Simplified) (简体中文) VS coed汉化
2.IntelliCode 智能补全代码
3.IntelliCode API Usage Examples 智能代码API使用示例
4.jQuery Code Snippets jquery代码提示
5.Auto Close Tag 标签自动闭合
6.Auto Rename Tag 标签重命名对称
7.HTML Snippets 快速生成HTML文档格式
8.HTML CSS Support 智能提示CSS类名以及id
9.Auto Import 自动导入
10.Color Highlight 颜色代码高亮
11.Live Server “热重载”
12.Path Intellisense 智能路径补全
13.Image preview 图片预览
14.Code Translate 划词翻译
15.IntelliJ IDEA Key Bindings 支持IDE快捷键
16.Turbo Console Log console.log快捷操作
17.Git Graph Git图形化
18.ESLint 代码规范检查
19.Prettier - Code formatter 代码格式化
1.Chinese (Simplified) (简体中文)
VScode汉化支持
2.IntelliCode
代码补全(智能化代码)
3.IntelliCode API Usage Examples
智能代码API使用示例
4.jQuery Code Snippets
jquery代码提示
5.Auto Close Tag
新增标签时,自动闭合标签。
6.Auto Rename Tag
修改自闭和标签时,修改 ”开始标签/结束标签“ 时,”结束标签/开始标签“ 同时变更(自闭和标签和自定义标签会存在一些问题,请谨慎使用)。
7.HTML Snippets
用于快捷生成HTML
标签。
8.HTML CSS Support
智能提示CSS类名以及id
9.Auto Import
自动导入
10.Color Highlight
在编辑器中颜色高亮显示,比如:#fff
,#ffffff
,white
,rgb(255,255,255)
等等。
11.Live Server
为静态和动态页面启动具有实时重新加载功能的本地开发服务器,类似于webpack
中的热重载功能。
12.Path Intellisense
智能路径补全
13.Image preview
鼠标悬停可以预览图片
鼠标悬停在图片URL上时,可以预览图片,显示图片的大小和尺寸。不仅仅在css
中,也可以在js
、vue
等文件中预览
settings:{"gutterpreview.showImagePreviewOnGutter": false,// 关闭在行号中显示缩列图}
14.Code Translate
vscode 滑词翻译插件
15.IntelliJ IDEA Key Bindings
VSCode使用IDEA快捷键
16.Turbo Console Log
快速添加 console.log 信息,js debug 必备
快捷键
ctrl + alt + l 选中变量之后,使用这个快捷键生成 console.log
alt + shift + c 注释所有 console.log
alt + shift + u 启用所有 console.log
alt + shift + d 删除所有 console.log
17.Git Graph
Git 图形化显示和操作
18.ESLint
检查并确保代码编写的规范化,特别是在多人协同合作时(JS不是编译性语言,编写代码时无法发现错误)
更多配置详情参考ESLint 中文网
19.Prettier - Code formatter
20.外观美化插件推荐
主题
One Dark Pro
最受欢迎的暗黑主题
Material Theme
拥有非常多的主题,都很不错,也是有名的主题插件
Tokyo Night
不刺眼,色彩设计的很合理
文件图标
Material Icon Theme
拥有超多的文件图标,色彩饱和度高。
vscode-icons
也是非常不错的文件图标,下载量很高
相关配置:
1.Prettier - Code formatter
1.下载并启用插件
2.创建并配置 .prettierrc文件
附上本人用于HTML文档编写的 .prettierrc配置:
{
"printWidth": 80, // 每行最多字符数(超过会换行)
"tabWidth": 4, // 制表符(tab)的空格数
"useTabs": true, // 是否使用制表符(tab)进行缩进,false 表示使用空格
"semi": false, // 末尾无分号
"singleQuote": true, // 单引号代替双引号
"trailingComma": "none", // 禁止尾随逗号
"bracketSpacing": true, // 在对象的大括号之间添加空格
"arrowParens": "always", // 箭头函数参数周围的括号(始终添加)
"htmlWhitespaceSensitivity": "css", // 对 HTML 中的空白字符的敏感度
"endOfLine": "lf", // 行尾字符('lf'、'crlf'、'cr')
"proseWrap": "preserve", //Markdown换行方式('always'、'never'、'preserve')
"overrides": [
{
"files": "*.html", // 特定于 HTML 文件的配置
"options": {
"parser": "html" // 指定使用 HTML 解析器
}
}
]
}
3.设置 保存时自动格式化 和 默认Prettier格式化
鼠标右键选择”使用....格式化“设置默认Prettier格式化
其他相关补充:
-------------------------------------------------------------------------------------------------------------------------------
以上内容为学习笔记,如有不足,欢迎在下方评论中补充
标签:插件,Code,标签,代码,VS,HTML,Auto From: https://blog.csdn.net/m0_61619549/article/details/139842226