vs code 简易使用教程（前端）

一、常用设置：

1、设置tab为2空格

用户首选项 =》 设置 => 直接搜索editor.tabSize 设置为2

2、设置换行采用\n形式

用户首选项 =》 设置=> 直接搜索files:eol进行设置为\n。

如果映是\r\n了，可以通过下图的方式进行转换

 

二、vs code 常用插件

安装方法：点击vscode左侧扩展，搜索插件，点击安装

• Path Intellisense 可以查找文件路径
• Auto Rename Tag 改变开始标签自动修改结尾标签
• Document This js 的注释模板( 按两次 Ctrl+Alt+D ，只在js文件中有效)
• beautify 格式化代码的工具（如果使用了ESLint ，格式话出来的可能不符合ESLint 规则，建议不安装）
• AutoFileName  文件路径自动补全插件
• ESLint 添加对 ESLint 的支持
• Project Manager 项目管理器插件，可以在你的编辑器中快速切换项目

        按F1，输入pm会出来相关的命令

        打开文件件，选择响应的save命令进行保存，后续才能打开

•   如果项目管理中用到git，可以安装git相关插件，这里有一篇文章介绍的比较详细：https://www.cnblogs.com/xiaojianliu/p/12739905.html
• Settings Sync 设置同步插件( 方法参考：https://blog.csdn.net/u012207345/article/details/78246623#commentBox )
• Align  使代码根据 =，: 等对齐（如果使用了ESLint ，格式话出来的可能不符合ESLint 规则，建议不安装）
• npm Intellisense  在 import 导入语句中自动完成npm 模块。
• Vetur vue开发者才需安装，包含语法高亮、代码片段、Emmet、代码格式化、错误检测功能

 

三、vs code 常用快捷

• 命令面板：F1（命令面板可以执行相应插件）
• 重命名：F2
• 跳转定义（切出新编辑器）： Ctrl + Alt + click
• 跳转定义（切出新tab）：F12 或 Ctrl + 左键点击文件
• 快速定位文件 ctrl + p
• 分割编辑窗口 ctrl+ \
• 快速调出终端 Ctrl+`
• ctrl + d 选择同样元素
• shift + tab 移动代码

 

 

四、Emmet

 

输入 div 回车

 

 

输入 div#IDname 回车

 

输入ul>li*2 回车

     

     

 

更多阅读：http://www.w3cplus.com/tools/emmet-cheat-sheet.html

 

 

 

五、snippets 定义代码片段，便于快速复用

 

依次点击：左下角设置图标=》用户代码片段=》在顶部弹出框中选择新建代码片段，起个名字保存后，生成的文件注释中有下面一段，把注释去掉，修改对应的内容即可，各项内容含义看下面注释。

     "Print to console": { //是智能提示显示的

     "scope": "javascript,typescript",

      "prefix": "log", //用户输入此处字符进行提示

      "body": [//代码片段写在此处

          "console.log('$1');",  // $1代表光标位置

          "$2"

     ],

      "description": "描述"

    }

这样定义后，下次输入log，就会显示提示，在提示中选择我们定义的那项，就会将代码片段插入，光标自定义到相应的$1处