vscode插件
链接原地址:https://www.cnblogs.com/vivaxiaonan/p/7380099.html
格式化文档 shift+alt+f
先按Ctrl+F打开搜索框,然后搜索要编辑的内容,接着按Ctrl+Shift+L就可以选中对应的所有内容了,然后可以全部编辑和替换了。按了Ctrl+shift+L之后把搜索框关闭就可以同时编辑多处了。
自动换行设置
File>>Preferences>>settings>>UserSettings>>CommonlyUsed>>找到Editor:WordWrap,将off修改为on即可
vscode搜索多个文件,同时替换 ctrl+shift+h
VScode现在已经越来越完善。性能远超Atom和webstorm,你有什么理由不用它?
在这里,我会给你们推荐很多实用的插件,让你对 vscode 有更深刻的体会,渐渐地你就会知道它有多好用。
走马观花前,请先将你的 vscode 更新到最新版本。
通用插件
HTML Snippets
超级实用且初级的 H5代码片段以及提示
HTML CSS Support
让 html 标签上写class 智能提示当前项目所支持的样式
新版已经支持scss文件检索
Debugger for Chrome
让 vscode 映射 chrome 的 debug功能,静态页面都可以用 vscode 来打断点调试,真666~
配置稍微复杂一些,哪天心情好我再另写教程吧~
jQuery Code Snippets
jquery 重度患者必须品,废话不多说,上图
vscode-icon
让 vscode 资源树目录加上图标,必备良品!
Path Intellisense
自动路劲补全,默认不带这个功能的,赶紧装
Npm Intellisense
require 时的包提示(最新版的vscode已经集成此功能)
Document this
js 的注释模板 (注意:最新版的vscode已经原生支持)
ESlint
ESlint 接管原生 js 提示,可以自定制提示规则。这个比较高玩,不会的就算了,我之前发过一篇文章 sublime 配置 Atom js 语法校验中有提到,他们的配置文件是通用的。
HTMLHint
html代码检测
Project Manager
在多个项目之前快速切换的工具
beautify
格式化代码的工具
Bootstrap 3 Sinnpet
常用 bootstrap 的可以下
Atuo Rename Tag
修改 html 标签,自动帮你完成尾部闭合标签的同步修改,不过有些bug。
GitLens
丰富的git日志插件
fileheader
顶部注释模板,可定义作者、时间等信息,并会自动更新最后修改时间
filesize
在底部状态栏显示当前文件大小,点击后还可以看到详细创建、修改时间
Bracket Pair Colorizer
让括号拥有独立的颜色,易于区分。可以配合任意主题使用。
Quokka
使用:先shift+cmd+p (ctrl+shift+p)输入 quokka 选择 new javascript 就行了
Quokka 是一个调试工具插件,能够根据你正在编写的代码提供实时反馈。它易于配置,并能够预览变量的函数和计算值结果。另外,在使用 JSX 或 TypeScript 项目中,它能够开箱即用。
/?/在某个表达式之后(或//?在语句之后)插入特殊注释将仅记录该表达式的值。
例如,
a.b()/?/.c().d()
将输出a.b()表达式的结果,和
a.b().c().d() /?/// or justa.b().c().d() //?
将输出完整a.b().c().d()表达式的结果。
/?./ 在任何表达式之后插入特殊注释将报告执行表达式所花费的时间。
a() //?. $ 显示a()执行时间和结果。
CSS Peek
使用此插件,你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时,选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置的 CSS 代码。
插件地址:
https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek
HTML Boilerplate
通过使用 HTML 模版插件,你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。你只需在空文件中输入 html,并按 Tab 键,即可生成干净的文档结构。
插件地址:
https://marketplace.visualstudio.com/items?itemName=sidthesloth.html5-boilerplate
Prettier
Prettier 是目前 Web 开发中最受欢迎的代码格式化程序。安装了这个插件,它就能够自动应用 Prettier,并将整个 JS 和 CSS 文档快速格式化为统一的代码样式。如果你还想使用 ESLint,那么还有个 Prettier – Eslint 插件,你可不要错过咯!
插件地址:
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Color Info
这个便捷的插件,将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标,就可以预览色块中色彩模型的(HEX、 RGB、HSL 和 CMYK)相关信息了。
插件地址:
https://marketplace.visualstudio.com/items?itemName=bierner.color-info
Icon Fonts
这是一个能够在项目中添加图标字体的插件。该插件支持超过 20 个热门的图标集,包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons。
插件地址:
https://marketplace.visualstudio.com/items?itemName=idleberg.icon-fonts
Minify
这是一款用于压缩合并 JavaScript 和 CSS 文件的应用程序。它提供了大量自定义的设置,以及自动压缩保存并导出为.min文件的选项。它能够分别通过 uglify-js、clean-css 和 html-minifier,与 JavaScript、CSS 和 HTML 协同工作。
使用F1运行文件缩小器Minify
插件地址:
https://marketplace.visualstudio.com/items?itemName=HookyQR.minify
Vue插件
以下推荐vue框架所需的插件
vetur
语法高亮、智能感知、Emmet等
VueHelper
snippet代码片段
