vscode 插件

通用

序号名称描述
1chinese(simplified ...)简体中文语言包
2live serverhtml 实时预览
3prettier-code formatter最流行的代码格式化插件
4better comments自定义注释颜色
5path intellisense路径自动感知填充
6helium icon theme一款我喜欢的文件图标主题
7one dark pro经典的主题,使用者众多,很耐看
8material theme经典”材料”主题
9material theme icons常与material theme配置的文件图标
10shades of purple赛博朋克风格的一款主题,很明亮风骚
11dracula official经典的吸血鬼主题
12dracula at night个人更喜欢这款小众的吸血鬼暗黑版(教学用它)
13code runner几乎可以快速运行常见的所有语言,如php,java,js...
14codesnap快速生成苹果电脑风格的代码片断截图,分享时使用

markdown

序号名称描述
1markdown preview...markdown 实时预览
2markdownlintmarkdown 语法检查器

html / css

序号名称描述
1auto close tag标签自动关闭
2auto rename tag标签自动更名
3indent-rainbow以不同颜色显示代码缩进
4css peek查看并跳转到 css 定义位置
5html css supportcss 自动智能补齐
6intellsense for css ...html 中的 css 智能提示
7easy lessless 实时编译
8px-to-viewportpx 自动转 vw
9svg previewsvg 预览器
10tailwind css ...无需离开 html 就可快速构建出现代网页
11tabout按 tab 就可快速跳到下一下,或跳出/越过括号等

js / es6 / node / vue

序号名称描述
1bracket pair ...括号高亮配对提示
2javascript(es6) code snippets常用 js 代码片断
3node-snippets常用 node 代码片断
4quokka.jsjs/es6 代码语法实时检查/执行器(续命法宝)
5rest client可不离开 vscode 环境进行 api 请求测试
6eslintjs 代码质量智能分析器
7veturvue 语法高亮,智能感知,emmet 等
8vue3 snippetsvue3 常用代码片断
9vue-helper: vue-helper在扩展中使用的 vue 提示,如 element ui

php

序号名称描述
1php intelephensephp 语法提示/自动补齐
2php intellisensephp 代码跟踪/重构/自动完成
3php debugphp 代码调试器
4php docblokerphp 生成块级注释
5vscode-databasevscode 数据库 SQL 支持插件

编程字体

为什么必须用等宽字体?
从视觉上快速区分,0 和 o, 1 和 l, 等宽字体可以做到,全部字符采用相同宽度,可有效解决它

字体名称描述支持连写
Fira Code喜欢的真喜欢,讨厌的真讨厌支持
JetBrains MonoJetBrains 出品,免费支持

字体安装成功后,还需要在 vscode 中进行配置: settings.json

# 将Fira Code 字体放在第一个
"editor.fontFamily": "'Fira Code',Consoles, 'Courier New', monospace",

# 打开允许连写开关
"editor.fontLigatures": true,

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注