Live Server,以前使用 Live Server 都是 n p mNode 包管理器 下载的,而且使用的时候需要在控制台手动敲启动代码。还好 VSCode 有了相应的插件,现在只需要鼠标点几下就行了。这个插件基本功能是预览网页,但它的特点是:会将网页在本地服务器上预览,最重要的是代码保存之后,浏览器自动刷新,有多方便不用我说了吧?
使用方法:
1、在 HTML 文件上右键
2、打开 HTML 文件,点击编辑器右下角 Go Live 按钮
CSScomb,看名字应该可以联想到它的功能了吧?没错,正如其名,一把梳理 CSS 属性顺序的 “梳子”。CSS 属性书写顺序非常重要,一个合格的前端er 一定会有他遵循的 CSS 书写顺序规则。至于 CSS 属性书写顺序,这里我
推荐腾讯 AollyTeam,团队的规范:http://alloyteam.github.io/CodeGuide/#css-declaration-order
下面简单说下这个插件怎么用。按照插件的文档说明:
在项目的根目录下创建一个名为:.csscomb.json / csscomb.json / .csscomb.js / csscomb.js 的文件,然后添加一些配置项。也可以将配置项写入项目的 package.json 文件中的 csscombConfig
字段。至于添加的配置项,CSScomb提供了示例配置文件:https://github.com/csscomb/csscomb.js/blob/master/config/csscomb.json
其中的 sort-order 就是 CSS 属性书写顺序,可以按照自己遵循的规范设置,所以我直接替换成了腾讯的。
放一个效果图:
下面的 content 属性放在第一个是我的个人习惯,其他的顺序都和 AollyTeam 的规范保持一致。
carbon-now-sh,将代码分享为图片(图片的格式可以为 png 和 svg),最最最重要的是: 图片逼格敲高 ↓↓↓
CodeIf,CodeIf 是一个用来给变量命名的网站,你只要输入你想起的中文名,它就会给你提供很多建议的命名,可能很多人知道有 CodeIf 这么个网站,其实 VS Code 上有插件哦,是不是
很神奇 :
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
LeetCode,看到这个名字是不是很熟悉???没错,它就是有名的刷题网站 LeetCode 啦。今天我是才知道 VS Code 中有插件,果断入手 (๑•̀ㅂ•́)و✧使用很简单输入用户名和密码就行了,看图:
是不是想着自己刷完 LeetCode,拿到大厂 offer 的样子已经激动地搓手手了呢 ?那就赶紧入手吧!
Regex Previewer,实时预览正则表达式的效果。
css-auto-prefix,自动添加 CSS 私有前缀。
change-case,转换命名风格。
vscode-json处理 JSON 文件,用法看图:
HTML Boilerplate,虽然 VSCode 已经内置了一键生成 HTML 模板的快捷方式,但这个有另外的用处,看图:
Settings Sync,在不同电脑间同步你的插件。安装了这么多插件,换了台电脑又得重新安装,所以,这个插件不考虑入手吗?
这里简述下这个插件怎么用:首先要想在不同的设备间同步你的插件, 需要用到 Token 和Gist id
Token 就是你把插件上传到 github 上时, 让你保存的那段字符,Gist id 在你上传插件的那台电脑上保存着。
ps: 如果你没有保存Token,也不知道Gist id,不要慌, 可以这样获取:
在你上传 Sync 设置的 VSCode 里,按 F1, 然后输入 Sync,选择 Sync: 高级选项:
然后选择:
这样就会进入一个压缩的文件,然后鼠标右键整理一下文档格式如下:
这样就能看见你的 Token 了。
接下来就是获取你的 Gist id:
在 VSCode 里,依次打开: 文件 -> 首选项 -> 设置,然后输入 Sync 进行搜索:
这样就获取到你的 Gist id。
知道了 Token 和 Gist id,就能在不同设备间同步你的 VSCode 插件。
(当然,你也可以把 Token 和 Gist id 分享给别人,这样别人就能一键下载你用的 VSCode 插件!)
彩蛋2:
我的 Token 和 Gist id 分别是:
Token:
4f5135c3c9e7275950f58133bc4b5f75461ceef3
Gist id:
ce3ff9d53df48d738f1e9e86fff55a8c
里面有我用的所有 VSCode 插件 : )
ES7 React/Redux/GraphQL/React-Native snippets,React/Redux/GraphQL/React-Native 代码快捷生成。
px to rem,像素转 rem。
Minify,压缩 HTML、CSS、JS 代码。