博主信息
博文 2
粉丝 0
评论 0
访问量 3362
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
Visual Studio Code编辑器(简称vscode)及相关常用扩展的安装及配置
坤哥哥
原创
2323人浏览过

Visual Studio Code编辑器安装

1、官网下载

  • 点击链接https://code.visualstudio.com/访问vscode官方网站,然后点击下图红框位置进行下载相应版本,下图以Win10 x64为例。

vscode首页下载

2、安装

vscode软件图标

  • 下载完成后双击上图图标进行安装。一直下一步,直至完成。

3、安装常用扩展

  • 安装完成后进行双击打开vscode,然后如下图所示依次点击相关图标,搜索相关扩展并进行安装。

安装扩展

  • 推荐必装扩展。
序号 扩展名称(可直接复制粘贴到上图搜索栏位置进行搜索安装) 简要功能
1 Chinese (Simplified) Language Pack for Visual Studio Code 中文语言包
2 live server 神级插件,实时预览html文件
3 prettier-code formatter 代码自动格式化
4 code runner 几乎支持所有主流语言的临时运行测试
5 auto close tag 标签自动关闭
6 auto rename tag 标签自动更名
7 html css support html,css语法提示增强
8 html snippets 常用html代码片断模板
9 css peek 快速定位/查看id/class的css定义
10 IntelliSense for CSS class names in HTML class类名自动感应完成
11 javascript(es6) code snippets 常用es6代码片断模板
12 tab out 按tab自动跳过右括号
13 bracket pair colorizer 使用不同颜色标记括号配对
14 markdownlint markdown语法/格式检查器
15 markdown preview enhanced markdown预览器增强版
16 One Dark Pro Darker 程序员喜欢的模板样式

4、修改配置文件

  • 如何快速修改配置文件?依次点击上方【文件】-【首选项】-【设置】,然后点击【字体】-【在settings.json】或按下图操作也可。

设置按钮

修改代码

  • 复制下方代码到上图后保存即可。
  1. {
  2. "editor.fontLigatures": true,
  3. "editor.defaultFormatter": "esbenp.prettier-vscode",
  4. "editor.formatOnType": true,
  5. "javascript.format.placeOpenBraceOnNewLineForFunctions": true,
  6. "window.zoomLevel": 1,
  7. "workbench.colorTheme": "One Dark Pro Darker",
  8. "emmet.syntaxProfiles": {
  9. "html":{"inline_break":2}
  10. },
  11. "emmet.variables": {
  12. "lang": "zh-CN",
  13. "charset": "UTF-8"
  14. },
  15. "editor.formatOnSave": true,
  16. "liveServer.settings.donotShowInfoMsg": true,
  17. }
批改老师:PHPzPHPz

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学