开发工具安装系列 - Visual Studio Code安装配置

最新推荐文章于 2023-06-24 09:29:29 发布

PetrichorOnE

最新推荐文章于 2023-06-24 09:29:29 发布

阅读量139

点赞数

分类专栏：开发工具文章标签： web

本文链接：https://blog.csdn.net/weixin_46551017/article/details/113664829

版权

开发工具专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Visual Studio Code

Visual Studio Code 简称 VS Code，想必很多人都还是听说过的，个人了解和亲身经历，目前很多的公司都是用的该软件进行前端开发，我个人认为有以下几大原因：

界面美观，可定制主题和各种图标等
开源的，这个就不用说了吧
可支持第三方插件，插件丰富而且很好安装
开发方式更加多样，远程开发和云开发是VS Code比较新的地方，我觉得可能会改变开发人员的开发方式
个人认为快捷键是设计很合理的了

下载安装

由于是开源的，那么就直接进入官网下载吧，地址：Visual Studio Code官网

选择支持的系统（我的电脑是Windows 64位的）

软件本身很小，下载下来是一个exe可执行的文件，双击开始安装
安装过程很简单，更改你要安装到的地址就行了
安装完成就能打开VS Code

插件的安装

安装中文语言包

搜索 Chinese (Simplified) Language Pack for Visual Studio Code，然后下载下来，重启

如果发现没有变成中文，使用快捷键 ctrl+shift+p 输入 configure display language 打开locale.json，如下修改为 zh-cn

{
    // 定义 VS Code 的显示语言。
    // 请参阅 https://go.microsoft.com/fwlink/?LinkId=761051，了解支持的语言列表。
    
    "locale":"zh-cn" // 更改将在重新启动 VS Code 之后生效。
}

以下简略推荐几种常用的插件，需要更多的插件可以去官网的插件库去了解 VS Code插件库官网

ESLint
作用：将ESLint JavaScript集成到VS代码中。ESLint是一种用于识别和报告ECMAScript / JavaScript代码中的模式的工具，其目标是使代码更加一致并避免错误。
Open-In-Browser
作用：允许您在默认浏览器或应用程序中打开当前文件

HTML CSS Support
作用：对HTML文档的CSS支持
Debugger for Chrome
作用：在Chrome浏览器或支持Chrome Debugger协议的任何其他目标中调试JavaScript代码（Debugger for Firefox等）
JQuery Code Snippets
作用：超过130个用于JavaScript代码的jQuery代码片段。只需键入字母’jq’即可获得所有可用jQuery代码片段的列表
Auto Rename Tag
作用：重命名一个HTML / XML标记时，会自动重命名配对的HTML / XML标记，就是当你修改前面一半的标签时，后面的会跟着变化
Auto Close Tag
作用：自动添加HTML / XML关闭标记，与Visual Studio IDE或Sublime Text相同，相当于自动加上后面那一半标签
JavaScript (ES6) code snippets
作用：用于Vs代码编辑器的ES6语法中的JavaScript代码片段（支持JavaScript和TypeScript），这个不用说了还是很重要的
Live Server
作用：会将网页在本地服务器上预览，最重要的是代码保存之后，浏览器自动刷新
GitLens
作用：详细的 Git 提交日志，Git 重度使用者必备，尤其是多人协作时：哪一行代码，何时、何人提交都有记录
vetur
作用：语法错误检查，语法高亮，配合 ESLint 插件使用更佳