vscode 插件

通用

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

markdown

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

html / css

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

js / es6 / node / vue

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

php

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

 

编程字体

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

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

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

 

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

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



转载https://mp.weixin.qq.com/s/dNi_nQ4L4lI1lgcjtRyXkw