美文网首页VScode
VScode前端开发必要的插件

VScode前端开发必要的插件

作者: zhaoxiaohui520 | 来源:发表于2019-09-29 20:15 被阅读0次

一,Auto Rename Tag 

    在修改标签名时,能在你修改开始(结束)标签的时候修改对应的结束(开始)标签,帮你减少 50% 的击键;

二,Bracket Pair Colorizer 2

 会已不同颜色和横线显示括号的范围

三,HTML Snippets

快速的生成html标签

首先奉上官网:https://code.visualstudio.com/,官网下载中文简体,安装后发现仍然是英文的心想竟然骗我,但是右下角会有一个提醒说是点击安装后会显示中文版(其实就是优先安装了一个中文插件Chinese (Simplified) Language Pack for Visual Studio Code),点击之后中文版就直接更新过来啦!接下来就是安装适合自己的插件啦!

1、首当其冲的当然是Open-In-Browser,不用过多解释;在浏览器中打开网页;可以选择默认浏览器和其他浏览器。我在官网下载的新版本直接有在浏览器中打开插件,好吧!

2、对于一个对干净的代码有执念的猪猪女孩来说格式化插件是必须的。Prettier  

3、Color Info:颜色提示插件,只需要将鼠标放在颜色值上悬停,就可以预览色块中色彩模型的(HEX、 RGB、HSL 和 CMYK)相关信息啦。

4、代码格式化HTML CSS support自动补齐css

5、JS-CSS-HTML Formatter    代码格式化了解一下

6、jQuery Code Snippets    jQuery自动提示

7、Path Autocomplete     路径自动补齐

8、ESLint         检测JS必备

9、Auto Rename Tag   同步修改对应标签,这个hin方便,想象一下几屏幕的代码要改标签,啊。。。完美!

10、Html Snippets     H5代码片段和提示

11、Html Css Support      在标签新增class的时候会提示之前写过的class

12、vscode-icon    给项目文件夹前边加上icon

13、Beautify  / Beautify css/sass/scss/less      样式格式化(两个的区别还没感受出来)

14、Bracket Pair Colorizer      让每个括号都有自己的颜色

15、给标签们加个相对应的虚线  文件 ——>首选项——>设置——>搜索renderIntentGuides→将此选项改为true(默认为false)

16、Material Icon Theme 图标插件项目中文件会以相应的icon提示

17、Vetur:Vue多功能集成插件,包括:语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger。vscode官方钦定Vue插件,Vue开发者必备。

————————————————

版权声明:本文为CSDN博主「你说香不香」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/user_008/article/details/82224650

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://blog.csdn.net/zilaiye1314/article/details/77973257

VSCode  WEB、PHP开发必备插件一览表:

++++++++++++++++++++++++++++++++++++++++

VIM   #喜欢用VIM操作的小伙伴可以加上这个,不要用amVIM(用得不爽,好多vim功能都没有)

Better Align  #对齐用的,设置一下快捷键 Ctrl + Alt + =,对块自动等号对齐

Auto Close Tag    #自动标签闭合

Auto Rename Tag  #自动标签重命名

Code Outline    #函数变量列表  (目前有点小问题,显示的函数列表是双份的)

ftp-simple      #FTP远程同步工具   

HTML CSS Support       # CSS支持工具

HTML Snippets    # HTML小片段工具

IntelliSense for CSS class names  # CSS类名工具

JavaScript code snippets     

JS-CSS-HTML Formatter   #这个慎用,最好不加吧,每次保存自动格式化

jshint      #js代码检查工具

MetaGO    #类是easymotion ,可以用键盘快速移动的工具

npt Intellisense       #其他软件需要这个辅助工具,(具体不是很清楚)

Path Intellisense     #路径管理工具

PHP  Debug   

PHP Extension  Pack  #PHP扩展包

PHP Intellisense       #PHP自动补全工具

PHP Intellisense -Crane   #PHP自动补全工具

Project Manager     #多个项目之间切换的工具

Typing Installer   # 不是很清楚,但很有用

vscode-icons      #给不同的文件类型添加图标

发现一个非常详细的介绍:

https://segmentfault.com/a/1190000006697219

++++++++++++++++++++++++++++++++++++++++

用户设置:文件-->首选项-->设置

{

    "extensions.ignoreRecommendations": true,

    "workbench.iconTheme": "vscode-icons", #增加文件夹图标

    "php.validate.executablePath": "C:\\phpStudy\\php56n\\php.exe",  #这两个对于PHP非常重要

    "php.executablePath": "C:\\phpStudy\\php71\\php.exe",

    "extensions.autoUpdate": false,

    "window.zoomLevel": 0,

    "vim.disableAnnoyingNeovimMessage": true,

    "editor.minimap.enabled": false     #这个会关掉右边滑动预览栏(非常占位子)

     "editor.wordWrap": "on"  #每行如果超出视图范围就自动换行显示(仅仅是显示换行,方便阅读和编辑)

}

++++++++++++++++++++++++++++++++++++++++

键盘快捷方式:文件 -->首选项 -->键盘快捷方式

[

{

    "key": "ctrl+alt+oem_plus",

    "command": "wwm.aligncode",

    "when": "editorTextFocus && !editorReadonly"

},

{

        "key": "ctrl+n",

        "command": "explorer.newFile"

}

]

+++++++++++++++++++++++++++++++++++++++

————————————————

版权声明:本文为CSDN博主「StoneAir18」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/zilaiye1314/article/details/77973257

相关文章

网友评论

    本文标题:VScode前端开发必要的插件

    本文链接:https://www.haomeiwen.com/subject/vqvpuctx.html