VScode 入门教程

• VScode简介
• VScode下载与安装
• VScode常用设置
• • 基础设置
  • 禁用自动更新
  • 自动保存
  • 主题更换
  • VScode常用快捷键
  • VScode前端常用插件(vue)

    VScode简介

    VSCode 全称 Visual Studio Code，是微软出的一款轻量级代码编辑器，免费、开源而且功能强大。它支持几乎所有主流的程序语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux。

    VScode下载与安装

    官网地址: VScode官网

    

    点击download后根据自己的系统及需求下载对应的版本，下载之后点击安装。

    VScode常用设置

    VScode的默认语言是英语，如果不熟悉英语的同学，或者是希望更加熟练掌握VScode的小白同学可以选择配置Chinese语言插件，如下图所示

    • 点击右边的扩展
    • 搜索Chinese语言扩展包
    • 点击安装
    • 重启VScode
    • 最左侧是活动栏，活动栏由上到下分别是打开侧边栏，搜索，使用git，debug，使用插件；
    • 侧边栏，新建项目文件和文件夹
    • 面板栏，从左到右依次为，问题，输出，调试栏，终端（terminal），最重要的是terminal，用来输入相关命令；
    • 状态栏，点击错误和警告区域可以调出面板栏

      

      基础设置

      点击文件＞首选项＞设置，选择喜欢的风格进行设置；推荐一些基础设置。

      （1）editor.fontsize用来设置字体大小，可以设置editor.fontsize : 14;

      （2）files.autoSave这个属性是表示文件是否进行自动保存，推荐设置为onFocusChange——文件焦点变化时自动保存。

      （3）editor.tabCompletion用来在出现推荐值时，按下Tab键是否自动填入最佳推荐值，推荐设置为on;

      （4）editor.codeActionsOnSave中的source.organizeImports属性，保存时能够让你的 import 语句按照字母顺序进行排列，看个人喜好

      （5）editor.lineNumbers设置代码行号,即editor.lineNumbers ：true；

      禁用自动更新

      文件 > 首选项 > 设置，搜索update mode 默认是default将设置更改为none。

      开启代码提示设置

      （1）点击左下角点击设置图标，找到并点击“setting”

      （2）到搜索框里搜索“prevent”—>并取消此项的勾选；

      

      自动保存

      文件 > 首选项 > 设置，搜索afterdelay即可，下面有个数字1000表示1秒，这个可自行设置，表示多少秒以后自动保存

      

      主题更换

      文件 > 首选项 >主题：一般是Color-Theme （颜色主题），一共有三个主题根据自己喜好选择

      VScode常用快捷键

      高效的使用vscode,记住一些常用的快捷键是必不可少的，我给大家罗列了一些日常工作过程中用的多的快捷键。以下以Windows为主，windows的 Ctrl，mac下换成Command就行了

      对于 行 的操作：

      • 重开一行：光标在行尾的话，回车即可；不在行尾，ctrl + enter 向下重开一行；ctrl+shift + enter 则是在上一行重开一行
      • 删除一行：光标没有选择内容时，ctrl + x 剪切一行；ctrl +shift + k 直接删除一行
      • 移动一行：alt + ↑ 向上移动一行；alt + ↓ 向下移动一行
      • 复制一行：shift + alt + ↓ 向下复制一行；shift + alt + ↑ 向上复制一行；光标移动到复制行ctrl+c复制本行
      • ctrl + z 回退

        对于 词 的操作：

        选中一个词：ctrl + d

        搜索或者替换：

        • ctrl + f ：搜索
        • ctrl + alt + f： 替换
        • ctrl + shift + f：在项目内搜索
        • 通过Ctrl + ` 可以打开或关闭终端
        • Ctrl+P 快速打开最近打开的文件
        • Ctrl+Shift+N 打开新的编辑器窗口
        • Ctrl+Shift+W 关闭编辑器
        • Home 光标跳转到行头
        • End 光标跳转到行尾
        • Ctrl + Home 跳转到页头
        • Ctrl + End 跳转到页尾
        • Ctrl + Shift + [ 折叠区域代码
        • Ctrl + Shift + ] 展开区域代码
        • Ctrl + / 添加关闭行注释
        • Shift + Alt +A 块区域注释

          如果上述快捷键还是不能满足你的平常使用，你可以使用Ctrl ＋K，Ctrl ＋S来调出快捷键设置

          VScode前端常用插件(vue)

          （1）vue2用vetur，vue3用volar与vetur相同，volar是一个针对vue的vscode插件，不过与vetur不同的是，volar提供了更为强大的功能（使用的时候需要把vetur 设置为禁用状态）

          ![在这里插入图片描述](https://img-blog.csdnimg.cn/ac80dca6027d4c3d831d9a025e55bc1c.png

          

          （2）与volar它配套的还有不用ts就可以不安装

          

          （3）Code Spell Checker（英语好的忽略）：英语跟我一样水平不太行的童鞋，可一定要有这个呀，可以检验你的英语命名，并且给你推荐你可能需要的英语命名，不错不错。安装即可。

          ![在这里插入图片描述](https://img-blog.csdnimg.cn/e56015fe635e485a9ff2069cc0635d83.png

          （4）JavaScript (ES6) code snippets : 此扩展包含用于 Vs Code 编辑器的 ES6 语法中的 JavaScript 代码片段（同时支持 JavaScript 和 TypeScript。

          

          （5）Path Intellisense (必备)

          

          （6）Git History：历史提交记录

          

          （7）Live Server（必备）：在线部署调试的工具，相当于模拟了一个服务器启动，对于不太懂服务器部署的童鞋来说，初期还是比较方便的。

          （8）Auto Import、Auto Close Tag 、Auto Rename Tag（必备）：标签自动化三剑客，Auto Import可以根据你引入的组件，自动导入提示；Auto Rename Tag当你修改标签的时候，自动完成另一侧标签的同步修改；Auto Close Tag 自动闭合HTML/XML标签，谁用谁知道。安装即可。

          

          

          

          （9）Eslint（必备）： 这东西一开始差点弄死我，但是配置好了是真香，校验我们的代码规范，是一件很重要的事情，减少我们的测试工作量！需要一定的配置。

          

          感谢大家看完整篇，整理不易，有什么不对的欢迎指点，不定时更新，尽量节省大家到处找好插件的时间。