Visual Studio Code(VS code)你们都在用吗?看了这篇博文或许对你有用。。。
1、vscode 特点:
- 开源,免费;
- 自定义配置
- 集成git
- 智能提示强大
- 支持各种文件格式(html/jade/css/less/sass/xml)
- 调试功能强大
- 各种方便的快捷键
- 强大的插件扩展
2、官网
Visual Studio Code(VScode )官网 :https://code.visualstudio.com/
3、安装一些常用插件
插件官网:https://marketplace.visualstudio.com/
(1)、Settings Sync
最好用的插件,没有之一,一台电脑配置好之后,其它的几台电脑都不用配置。新机器登录一下就搞定了。再也不用折腾环境了,
使用GitHub Gist同步多台计算机上的设置,代码段,主题,文件图标,启动,键绑定,工作区和扩展。
(2)、Debugger for Chrome
从VS Code调试在Google Chrome中运行的JavaScript代码。
(3)、beautify
格式化代码工具:美化javascript,JSON,CSS,Sass,和HTML代码。
(4)、Atuo Rename Tag
修改 html 标签,自动帮你完成头部和尾部闭合标签的同步修改。
(5)、中文(简体)语言包
Chinese (Simplified) Language Pack for Visual Studio Code
将界面转换为中文,对英语不好的人,非常友好。
(6)、Code Spell Checker
代码拼写检查器,一个与camelCase代码配合良好的基本拼写检查程序。
此拼写检查程序的目标是帮助捕获常见的拼写错误,同时保持误报数量较低。
(7)、vscode-icons
显示Visual Studio代码的图标,目前该插件已被vscode内部支持:“文件” -> “首选项” -> “文件图标主题”。
(8)、guides
显示代码对齐辅助线,很好用。
(9)、Rainbow Brackets
为圆括号,方括号和大括号提供彩虹色。这对于JavaScript和其他程序员特别有用。
(10)、Bracket Pair Colorizer
用于着色匹配括号。
(11)、filesize
在状态栏中显示当前文件大小,点击后还可以看到详细创建、修改时间.
(12)、Path Intellisense
可自动填充文件名。
(13)、Project Manager
它可以帮助您轻松访问项目,无论它们位于何处。不要再错过那些重要的项目了。您可以定义自己的收藏项目,或选择自动检测VSCode项目,Git,Mercurial和SVN存储库或任何文件夹。
(14)、Atom One Dark Theme (主题)
一个基于Atom的黑暗主题
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nhiJBHgw-1582697797598)(/storage/image/3gYImmLjse6gJlDrr4HeCWHQW2tideHuKbmpRlmz.png)]
(15)、Dracula Official (主题)
官方吸血鬼主题,小编用的就是这款,很漂亮。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hovjJho1-1582697797599)(/storage/image/FRbNRpVwls1uw93ZAQTBOcEzV9t0BU68WEoe7BB3.png)]
(16)、One Dark Pro (主题)
Atom标志性的One Dark主题,也是VS Code下载次数最多的主题之一!
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L8hqYhnh-1582697797599)(/storage/image/xQpCTrd7PNQidWSFUDaaQGCBGvVHSgNGWpRKBjmI.png)]
(17)、Bimbo (主题)
简约而现代的神奇海洋主题。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wlmJHEaL-1582697797600)(/storage/image/iO5id0mvKd3CICoZcgv4Jt2w4eQBiINV4ON4auxp.png)]
(18)、HTML Snippets
完整的HTML代码提示,包括HTML5。
(19)、HTML CSS Support
在 html 标签上写class 智能提示css样式。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8TN1UO5x-1582697797600)(/storage/image/SXdnzq5q2qUfKZjAHk0yZuRZlnow2bLmjeseUdh2.png)]
(20)、jQuery Code Snippets
jQuery代码提示,超过130个用于JavaScript代码的jQuery代码片段。
只需键入字母’jq’即可获得所有可用jQuery代码片段的列表。
(21)、HTMLHint
html代码检测,支持html5。
(22)、PHP Debug
配合php扩展Xdebug使用。
(23)、open in browser
前端快速的打开浏览器。
(24)、Bracket Pair Colorrizer
用来区分括号。
(25)、PHP DocBlocker
用于函数,类的快速注释。
(26)、PHP Intelephense
PHP智能感知。
(27)、PHP Intellisense
PHP智能感知,两个都下。
(28)、Path Intellisense
路径感知。
(29)、PHP Namespace Resolver Namespace
快速引入选中类,按ctrl+alt+I。
(30)、php cs fixer
Ctrl + S自动格式化php代码。
4、小编下载插件后配置的 settings.json
{
"extensions.ignoreRecommendations": true,
"extensions.autoUpdate": false,
"window.zoomLevel": 0,
"files.autoSave": "afterDelay",
"[javascript]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"[html]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"files.maxMemoryForLargeFilesMB": 9216,
//vscode-icons插件设置
"vsicons.presets.hideFolders": false,
"workbench.iconTheme": "vscode-icons",
// PHP基本设置与PHP智能感知
// 插件作者建议禁用VS代码内置的PHP智能感知设置php.suggest.basic,以false避免重复的建议
"php.suggest.basic": false,
"intelephense.completion.insertUseDeclaration": true,
//指向php可执行文件(最少在php7.0版本以上)
"php.validate.executablePath": "D://phpstudy_pro//Extensions//php//php7.2.9nts//php.exe" ,
//path-intellisense插件(js路径感知插件)
"path-intellisense.extensionOnImport": true,
//PHP DocBlocker插件设置
"php-docblocker.gap":false,
"php-docblocker.returnGap": false,
"php-docblocker.useShortNames": true,
"php-docblocker.extra": [
"@author Jackhhy",
"@date $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE"
],
//vscode自带设置
"window.titleBarStyle": "custom", //标题栏样式
"editor.wordWrap": "on", //自动换行
"workbench.statusBar.feedback.visible": false, //关闭笑脸反馈
"editor.minimap.enabled": true, //关闭迷你窗口
//自动更改尾部标签
"auto-rename-tag.activationOnLanguage": [
"html",
"xml",
"php",
"javascript"
],
"editor.renderIndentGuides": false,
"workbench.colorTheme": "Dracula Soft",
//css智能提示
"css.remoteStyleSheets": [
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
],
"css.fileExtensions": [ "css", "scss"],
//Ctrl + S 时格式化php代码
"php-cs-fixer.onsave": true,
//格式化.php文件中的html代码(html、css、js)
"php-cs-fixer.formatHtml": true,
"[php]": {
"editor.defaultFormatter": "junstyle.php-cs-fixer"
},
"php-cs-fixer.executablePath": "${extensionPath}\\php-cs-fixer.phar",
"php-cs-fixer.lastDownload": 1573608373811,
//自动
"files.associations": { "*.module": "php" },
}
觉得有用,记得点推荐哦,让别人也能看到!谢谢。