Vscode的配置及插件

SageLenient
2,511 阅读4分钟

涉及到的vue相关的插件会多一些

同步设置

  • 首先下载Setting Sync插件，具体教程插件中有介绍
  • 同步配置token值：记得保存
  • 同步之后会有一个GIST ID：也请保存上去
  • 之后重新下载VScode时，可以快速的同步所有配置项
  • shift + alt + U 更新vscode的配置
  • shift + alt + D 下载vscode的配置

基本设置

语言

如果不习惯英文版的VS Code，可以更改语言设置：

  • 【Ctrl+Shift+P】搜索输入【configure language】选择【Configure Display Language】

  • 选择安装其他语言，安装Chinese (Simplified) Language Pack for Visual Studio Code插件

  • 然后选择自己安装好的语言就可以重启使用

    注：新版的VS Code如上配置，比较简单，之前的配置需要在locale.json 中设置：

    "locale":"zh-CN"

缩进字符

一般都会将tab缩进变为2个字符：

文件->首选项->设置，然后在编辑框输入以下设置：

{
    "prettier.tabWidth": 2,
    "vetur.format.defaultFormatter.html": "prettier"
}

或者直接输入tableSize进行设置

插件

常用插件

VS Code中的插件可以根据自己的需求进行安装，一般常用的插件都是为了更快的编辑代码，减少不必要的错误和避免浪费不必要的时间。

Auto Close Tag

自动添加HTML / XML关闭标签。

Auto Rename Tag

自动重命名配对的HTML / XML标签。

Auto Import

自动导入。

Babel ES6/ES7

ES6，ES7语法加亮检查插件。

Code Spell Checker

单词拼写检查插件。

Debugger for Chrome(*)

一般用在VS中用来调试JS代码，如果有需要可以自己去搜配置项。

ESLint

ESLint代码检测，在setting.json配置如下，可根据规则自动修复：

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

可以在vue文件中跳转到引入的文件路径，以及查看定义位置。

在 settings.json 文件中配置如下：

    "file_peek.activeLanguages": [
        "typescript",
        "javascript",
        "vue" // 添加vue支持
    ],
    "file_peek.searchFileExtensions": [
        ".js",
        ".html",
        ".css",
        ".scss",
        ".vue" // 添加vue支持
     ]
Vue.js Extension Pack

安装此插件后可以跳转到别名路径所引入的文件（上面的插件File Peek无法跳转别名引入文件）。

相对应的，如果JS文件需要跳转至别名路径所引入的文件，可以配置jsconfig.json。

参见www.jianshu.com/p/b0ec870dd…

GitLens — Git supercharged

查看文件提交状态和时间，很实用。

Guides

代码的标签对齐线。使代码看起来更清晰工整，也方便格式的调整。

HTML Snippets

html标签自动填充，可以快速创建，例：

    div --> <div></div>
    doc --> <!DOCTYPE html>
    a   --> <a href=""></a>
Import Cost

引入的包大小展示，直观的感受引入文件所占内存。

JavaScript (ES6) code snippets

为JavaScript、TypeScript、HTML、React和Vue提供了ES6语法支持。

Node.js Modules Intellisense

提供JavaScript和TypeScript导入声明时的自动补全。

npm Intellisense（*）

npm 模块导入插件，在 import 导入语句中自动完成npm 模块。

Path Autocomplete

路径智能补全，在引入组件时会根据路径前缀显示出该路径下的文件或文件夹，提高效率。

Path Intellisense

路径智能提示。

Prettier - Code formatter

代码格式化，一般配合ESLint使用会更好。

vetur（*）

不多说，一般用vue都回去安装这个插件，配合ESLint，如何配置可自行搜索。

Vue 2 Snippets

vue代码片段自动补齐，实用，无需配置，重启即用。

Bookmarks

给代码设置书签进行快速跳转。快捷键可以自行设置。

该插件还可以跳转到所有标签，具体如下：

  • ctrl+P，再输入">"，输入插件名，查看该插件的命令
  • 选择命令Toggle Labeled（标记并给该标记命名），为其命名“xxx”后，当我们在别的文件中时，我们可以直接搜索该标签，跳转至标记处
  • 在别的文件中，ctrl+P，再输入">"，选择Bookmarks：List from All Files 陈列出你的标签，选择需要的标签

其他插件

以下插件可以根据自己喜好安装，只是分享给大家看看，如果有兴趣可以试试：

Lodash

在引入lodash的时候可以快速提示lodash包含的所有函数。（如果经常用lodash，该插件很实用）

Better Comments

更人性化的注释。

不同的注释显示不同的颜色，*，？，！起头然后开始写，你可以看到注释的颜色是不同的。

Better Align插件

对齐插件，可能会和Eslint语法检查出现冲突，我们现有的项目代码也没有使用该功能插件。

有兴趣可以自己配置使用。

Atom One Dark Theme

语法皮肤，美化代码。看个人喜好使用。

Material Icon Theme

这个能让文件夹看起来不那么无聊，漂亮多了，推荐

小结

这里面所描述的一些插件功能和配置可能不是很准确，欢迎指正

avatar
文章
阅读
粉丝