网站首页 » 前端开发 » 前端工具 » Visual Studio Code 让高效进行到底
上一篇:
下一篇:

Visual Studio Code 让高效进行到底

准备

一直都是用 sublime text 作为开发工具,用久了自然而然会觉得生活无趣,于是决定试试微软的新产品  Visual Studio Code 。

下载地址:https://code.visualstudio.com/

安装完后给我的第一感觉就是天边送来了一波难以抵抗的视觉盛宴。

Visual Studio Code 让高效进行到底

在这里界面里你就可以看到一个非常有情怀的快速链接:安装键盘快捷方式(你可以安装包括但不限于 Vim、Sublime、Atom 的键盘快捷方式),所有这个 coding 工具还是非常容易上手的。

从体积来说比 Sublime text 大了不少,30多兆,启动速度也肯定会慢一些,但还是在可接受的范围内,这个还跟机器有关系。

Visual Studio Code 的快捷键设置是统一管理的,所以你只需要修改一个文件就可以了。我们先来看看 Visual Studio Code 的常用快捷键。

Visual Studio Code 有两个比较重要的文件,一个是 setting.json (基本设置),另一个是 keybindings.json(配置快捷键文件)。它们 分别在【文件】-【首选项】-【设置】和【文件】-【首选项】-【键盘快捷方式】。

快捷键

Visual Studio Code 快捷键

如果看不清可以到官网去查阅:https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

极常用的快捷键:

ctrl + E 查找最近打开过的文件
ctrl + tab 在文件之间切换
ctrl + G 跳到指定行
Ctrl + Shift + F 在项目下所有文件内查找内容(并且可全局替换)
Ctrl + \ 或者 按住 Ctrl 双击文件。
Ctrl + p 全局搜索文件
Ctrl + Home / End 跳到文件头部或者尾部

插件

beautify

格式化代码(JavaScript JSON CSS Sass 和 HTML),安装完之后你可以使用F1来格式化代码了,注意F1 不是快捷键,铵F1 只是调出了命令面板,搜索beautify 就可以看到两个命令(to beautify a selection、Beautify file),这两个命令从字面上都很好理解,但在实践使用中,我却没发现他们有什么区别,肯定是会有区别的只是我还没发现而已。

Visual Studio Code 插件 beautify

https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify

vscode-icons

这是一个文件图标显示插件,可以根据你的文件类型开决定将显示何种图标。这样也不只是为了美观,还可以让自己一目了然。更好的定位到要查看的文件。

Visual Studio Code 插件 vscode-icons

https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons

open-in-browser

浏览器打开,这个插件虽然功能小,但还是挺方便的,你可以直接在编辑器中打开正在编辑的页面。这个插件的默认快捷键为:ctrl+alt+d,如果你觉得不是很符合自己的操作习惯,你也可以自己配置快捷键,至于怎么配置,后面会说到。

在实践的使用中却有点为难人,除了第一次打开是正确的文件外,后面你再按快捷打开的还是刚才打开的那个页面,而不是你当前正在编辑的页面。所以这个不推荐使用,也有可以是我电脑的问题,这个也不好说。重新安装了一遍问题依旧。

https://marketplace.visualstudio.com/items?itemName=coderfee.open-html-in-browser

如果你也像我一样遇到这样的问题,你可以试试下面这个同名的插件:

Visual Studio Code 插件 open-in-browser

https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser

我用这个就可以了。

Auto Rename Tag

自动同步修改的标签名,做的事虽然很不起眼,但确确实实提高了编码效率。

Visual Studio Code 插件 Auto Rename Tag

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

HTML CSS Support

列出项目里所有能用的类名,这个插件也挺有用的。有时候当你只记得一个类的首字母或者前几个字母时,这个插件就非常地有用了,当你敲出第一个字母后这个插件就会自动把项目里(当前HTML 文件引用到的.css 文件)与此匹配的类全都列出来,还带有来自哪个 .css 文件的提示。

Visual Studio Code 插件 HTML CSS Support

https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css

Settings Sync

同步设置。跨电脑时,可用于同步 Visual Studio Code 的配置,这样不管你用哪一台电脑 ,你不用重新配置 Visual Studio Code 直接安装这个 Setting Sync 插件同步下就可以了。

Visual Studio Code 插件 Settings Sync

https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

vscode-fileheader

这个插件可以为你在文件开头插件头信息,比如文件的作者,修改时间,有了这个插件你就不需要每次都码一次所谓的无用信息了。

这个插件的用法也好简单:快捷键为:ctrl+alt+i,的依次点开【开始】-【首选项】-【设置】,在用户配置文件中添加如下代码:

"fileheader.Author": "yunkus.com",
"fileheader.LastModifiedBy": "yunkus.com"

明人一看就知道上面的代码是什么意思了,在这里也不多说了,自己用心体会哈!

https://marketplace.visualstudio.com/items?itemName=mikey.vscode-fileheader

有了上面的基础后,我们就可以给插件来配置快捷键了。不管上面是什么插件,你都可以像下面这样配置快捷键。我们以 beautify 插件为例子:

依次点开【文件】-【首选项】-【键盘快捷方式】,此时你就可以看到两个窗口分别对应两个同名不同目录的 .json 文件( keybindings.json),你可以在右边的窗口中编辑你自己的自定义快捷键。

// 将键绑定放入此文件中以覆盖默认值
[
    { "key": "ctrl+shift+alt+f",     "command": "HookyQR.beautifyFile",
                                     "when": "editorFocus" }
]

这样就完成了 beautify 插件的快捷键设置。

配置选项

依次点开【文件】-【首选项】-【设置】

{
    "workbench.iconTheme": "vscode-icons",

    // 保存时设置文件的格式。格式化程序必须可用,不能自动保存文件,并且不能关闭编辑器。
    "editor.formatOnSave": true,

    // 控制是否显示 minimap
    "editor.minimap.enabled": true
}

最后两行是我自定义的配置,"editor.formatOnSave": true,保存时格式化(编辑器默认的格式化工具),"editor.minimap.enabled": true,是否显示小图预览。用过 Sublime text 的都应该知道这个功能。

ESLint

如果通过 vue-cli 脚手架来创建一个 Vue 项目的话,并在创建时配置了 eslint ,那么我们就会在 coding 时遇到一些警告提示,比如:空格过多过少,双引号等,为此我们需要一个 符合 eslint 的格式化插件,不过插件需要环境支持,所以我们需要:

1、安装 eslint 模块

npm install eslint //For a local install
或者
npm install -g eslint //For a global install

2、安装 vscode eslint 插件

3、File-> Preferences->Settings,在 User Settings 文件中添加如下代码:

"eslint.autoFixOnSave": true,
"eslint.validate": [
    "javascript",
    {
        "language": "vue",
        "autoFix": true
    },
    "html",
    "vue"
]

注意如下我们安装了 vscode 中安装 vetur 插件并 “editor.formatOnSave”: true ,那么此时我们就需要全部或者部分的 vetur 格式化项禁止掉,不然当你保存时你会看到代码先统一变成 vetur 格式化后的代码,然后再被格式化成符合 eslint 的代码。所以这里建议直接把  “editor.formatOnSave”: false,或者不设置(删掉,因为默认是 false),配置完后,保存代码就会自动格式化成 符合 eslint 的风格了。

下载地址:https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

离线安装插件

这个估计用得比较少,如是也不能说没有,在不可访问外网的公司里这种安装方式就不奏效了。下面我们来看看如何离线安装插件。

步骤一:访问插件

你可以在官网 https://marketplace.visualstudio.com/ 这里看到海量的插件。随便点击一个就可以进到插件的详情页了。在这里我们以 open-html-in-browser 这个插件为例,访问:https://marketplace.visualstudio.com/items?itemName=coderfee.open-html-in-browser 因为这个链接以这个链接里的页面有一些我们需要的信息。

步骤二:生成下载链接

https://${publisher}.gallery.vsassets.io/_apis/public/gallery/publisher/${publisher}/extension/${extension name}/${version}/assetbyname/Microsoft.VisualStudio.Services.VSIXPackage

上面这个链接是一个通用的下载链接模板,你可以在它的基础上修改几个参数就可以实现下载对应的插件了。现丰我们就以 open-html-in-browser 插件的下载为例。

首先链接模板里有几个型如:$ {……} 的占位符,这些点位符就是需要修改的参数。

${publisher} 对应链接中 “itemName =” 后面的值 coderfee ;

${extension name} 对应的是插件名也就是链接中的 open-html-in-browser

${version} 对应插件的版本号,你可以从插件的详情页中查看到。

替换后的链接如下:

https://coderfee.gallery.vsassets.io/_apis/public/gallery/publisher/coderfee/extension/open-html-in-browser/0.0.8/assetbyname/Microsoft.VisualStudio.Services.VSIXPackage

下载到本地的文件名为:Microsoft.VisualStudio.Services.VSIXPackage,完成了下载插件后,接下来就是如何安装它了。

步骤三:安装插件

修改文件的后缀名,把 Microsoft.VisualStudio.Services.VSIXPackage 重命名为 Microsoft.VisualStudio.Services.vsix。把这个文件放到一个目录中,比如在 E 盘目录下,然后运行cmd.exe 切换到这个目录,接着运行如下一行安装命令,稍等片刻你就会看到安装成功的提示了。

// 安装命令行
E:\> code --install-extension Microsoft.VisualStudio.Services.vsix

// 安装成功提示如下
Extension 'Microsoft.VisualStudio.Services.vsix' was successfully installed!
送温暖

如果你觉得 win+R 打开cmd.exe,再切换到目标目录麻烦,那么你也可以直接在存放 Microsoft.VisualStudio.Services.vsix 文件的目录,按住Shift 键不放,接着点击鼠标右键,然后在弹出菜单中选中【在此处打开命令窗口】选项。此时你打开的命令窗口就已经自动切换到当前目录了。

到此 Visual Studio Code 离线安装插件就完成了。

报错处理

最近在用 Visual Studio Code 写 Typescript 时发面一个小问题如下图:

experimentalDecorators warming

警告

[ts] Experimental support for decorators is a feature that is subject to change in a future release. Set the ‘experimentalDecorators’ option to remove this warning.

这个问题最快的解决方法就是不要用 Visual Studio Code 单独打开一个文件,而要先把整个 Angular 项目拖拽到 Visual Studio Code 中。这个就不会在正确的代码中出现红色波浪线了。如果你不想把整个目录都放到 Visual Studio Code 中,那么你也可以在 Visual Studio Code 的【文件】-【首先项】-【设置】文件中添加如下一行代码:

"typescript.tsdk": "C:/Users/你电脑的用户名/AppData/Roaming/npm/node_modules/@angular/cli/node_modules/typescript/lib"

这个路径就在你安装 @Angular 的路径下,如果路径不对会有如下提示:

类似这样

路径 i:\code\photo-wall\node_modules\typescript\lib 未指向有效的 tsserver 安装。请回退到捆绑的 TypeScript 版本。

路径配置好后,切换回文件就会看到红色波浪线不见了,两种方法都可以,随意。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/visual-studio-code/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END