vscode配置和插件

使用Visual Studio Code编写Vue的札记

梁源2017-04-28 2860标签： ESLint ， VSCode ， 网络编程

前言

Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Python, PHP, Go) and runtimes (such as .NET and Unity). Begin your journey with VS Code with these introductory videos.

英文官网：https://code.visualstudio.com/

中文官网：http://www.vscode.org/

一、下载并安装VSCode

点击下载： VSCode，并且安装到本地。

二、支持Vue文件的基本语法高亮

在VSCode Marketplace 搜素Vue 出现关于语法高亮的插件有 vue，vue-beautify，vue-color，VueHelper，vertur等等。比较了下载数量可以了解到，vetur 是目前比较好的语法高亮插件，我们来安装一下吧。

安装插件：Ctrl + P然后输入 ext install vetur 然后回车点安装即可

安装vetur之后，还需配置一下：emmet.syntaxProfiles，预防识别错误，不配置也没有太大问题

无语法高亮效果图：

高亮语法效果图：（舒服多了）

三、支持Vue文件的ESLint

安装ESLint可以有效的提示代码的低级错误，初期可能有些不习惯，但是使用时间长了会是很要的帮手。

安装插件：Ctrl + P 然后输入 ext install eslint然后回车点安装即可

ESLint 不是安装后就可以用的，还需要一些环境和配置：

首先，需要全局的 ESLint , 如果没有安装可以使用npm install -g eslint 来安装。

其次，vue文件是类 HTML 的文件，为了支持对 vue 文件的 ESLint ，需要 eslint-plugin-html 这个插件。可以使用 npm install -g eslint-plugin-html 来安装

接着，安装了 HTML 插件后，还需要在 vscode 中配置下 ESLint：

    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ],
    "eslint.options": {
        "plugins": ["html"]
    },

最后，别忘了在项目根目录下创建 .eslintrc.json , 如果还没创建，还可以使用下面快捷命令来创建。

四、个人VSCode首选项配置推荐（可根据自己喜好修改）

五、插件拓展-提高效率有效使用插件

Auto Close Tag 自动闭合HTML标签

Auto Rename Tag 修改HTML标签时，自动修改匹配的标签

Bookmarks添加行书签

Can I Use HTML5、CSS3、SVG的浏览器兼容性检查

Code Runner 运行选中代码段（支持大量语言，包括Node）

CodeBing 在VSCode中弹出浏览器并搜索，可编辑搜索引擎

Color Highlight 颜色值在代码中高亮显示

Color Picker 拾色器

Document This 注释文档生成

EditorConfig for VS Code EditorConfig插件

Emoji 在代码中输入emoji

ESLintESLint插件，高亮提示

File Peek 根据路径字符串，快速定位到文件

Font-awesome codes for html FontAwesome提示代码段

ftp-sync同步文件到ftp

Git Blame在状态栏显示当前行的Git信息

Git History(git log)查看git log

GitLens 显示文件最近的commit和作者，显示当前行commit信息

Guides 高亮缩进基准线

Gulp SnippetsGulp代码段

HTML CSS Class Completion CSS class提示

HTML CSS Supportcss提示（支持vue）

HTMLHintHTML格式提示

Indenticator 缩进高亮

JavaScript (ES6) code snippets ES6语法代码段

language-stylus Stylus语法高亮和提示

Lodash Lodash代码段

markdownlint Markdown格式提示

MochaSnippets Mocha代码段

Node modules resolve快速导航到Node模块

npm运行npm命令

npm Intellisense 导入模块时，提示已安装模块名称

Output Colorizer彩色输出信息

Partial Diff对比两段代码或文件

Path Autocomplete路径完成提示

Path Intellisense 另一个路径完成提示

Prettify JSON格式化JSON

Project Manager快速切换项目

REST Client发送REST风格的HTTP请求

Settings Sync VSCode设置同步到Gist

String Manipulation字符串转换处理（驼峰、大写开头、下划线等等）

Test Spec Generator 测试用例生成（支持chai、should、jasmine）

TODO ParserTodo管理

Version Lens package.json文件显示模块当前版本和最新版本

vetur目前比较好的Vue语法高亮

View Node Package 快速打开选中模块的主页和代码仓库

vscode-icons文件图标，方便定位文件

VSCode Great Icons 文件图标拓展

VueHelperVue2代码段（包括Vue2 api、vue-router2、vuex2）

六、快捷键使用

全局

Ctrl + Shift + P, F1显示命令面板

  • 按一下 Backspace 会进入到Ctrl+P 模式
  • 在 Ctrl+P 下输入> 可以进入 Ctrl+Shift+P 模式

Ctrl + P 快速打开

  • 直接输入文件名，跳转到文件
  • ? 列出当前可执行的动作
  • ! 显示 Errors 或 Warnings，也可以Ctrl+Shift+M
  • : 跳转到行数，也可以Ctrl+G 直接进入
  • @跳转到 symbol（搜索变量或者函数），也可以 Ctrl+Shift+O 直接进入
  • @根据分类跳转 symbol，查找属性或函数，也可以Ctrl+Shift+O 后输入:进入
  • 根据名字查找symbol，也可以Ctrl+T

Ctrl + Shift + N 打开新窗口

Ctrl + Shift + W 关闭窗口

基本

Ctrl + X 剪切（未选中文本的情况下，剪切光标所在行）

Ctrl + C 复制（未选中文本的情况下，复制光标所在行）

Alt + Up 向上移动行

Alt + Down 向下移动行

Shift + Alt + Up 向上复制行

Shift + Alt + Down 向下复制行

Ctrl + Shift + K 删除行

Ctrl + Enter 下一行插入

Ctrl + Shift + Enter 上一行插入

Ctrl + Shift + \ 跳转到匹配的括号

Ctrl + ] 增加缩进

Ctrl + [ 减少缩进

Home 跳转至行首

End 跳转到行尾

Ctrl + Home 跳转至文件开头

Ctrl + End 跳转至文件结尾

Ctrl + Up 按行向上滚动

Ctrl + Down 按行向下滚动

Alt + PgUp 按屏向上滚动

Alt + PgDown 按屏向下滚动

Ctrl + Shift + [ 折叠代码块

Ctrl + Shift + ] 展开代码块

Ctrl + K Ctrl + [ 折叠全部子代码块

Ctrl + K Ctrl + ] 展开全部子代码块

Ctrl + K Ctrl + 0 折叠全部代码块

Ctrl + K Ctrl + J 展开全部代码块

Ctrl + K Ctrl + C 添加行注释

Ctrl + K Ctrl + U 移除行注释

Ctrl + / 添加、移除行注释

Shift + Alt + A 添加、移除块注释

Alt + Z 自动换行、取消自动换行

多光标与选择

Alt + 点击 插入多个光标

Ctrl + Alt + Up 向上插入光标

Ctrl + Alt + Down 向下插入光标

Ctrl + U 撤销上一个光标操作

Shift + Alt + I 在所选行的行尾插入光标

Ctrl + I 选中当前行

Ctrl + Shift + L 选中所有与当前选中内容相同部分

Ctrl + F2 选中所有与当前选中单词相同的单词

Shift + Alt + Left 折叠选中

Shift + Alt + Right 展开选中

Shift + Alt + 拖动鼠标 选中代码块

Ctrl + Shift + Alt + Up 列选择 向上

Ctrl + Shift + Alt + Down 列选择 向下

Ctrl + Shift + Alt + Left 列选择 向左

Ctrl + Shift + Alt + Right 列选择 向右

Ctrl + Shift + Alt + PgUp 列选择 向上翻页

Ctrl + Shift + Alt + PgDown 列选择 向下翻页

查找替换

Ctrl + F 查找

Ctrl + H 替换

F3 查找下一个

Shift + F3 查找上一个

Alt + Enter 选中所有匹配项

Ctrl + D 向下选中相同内容

Ctrl + K Ctrl + D 移除前一个向下选中相同内容

Alt + C 区分大小写

Alt + R 正则

Alt + W 完整匹配

进阶

Ctrl + Space 打开建议

Ctrl + Shift + Space 参数提示

Tab Emmet插件缩写补全

Shift + Alt + F 格式化

Ctrl + K Ctrl + F 格式化选中内容

F12 跳转到声明位置

Alt + F12 查看具体声明内容

Ctrl + K F12 分屏查看具体声明内容

Ctrl + . 快速修复

Shift + F12 显示引用

F2 重命名符号

Ctrl + Shift + . 替换为上一个值

Ctrl + Shift + , 替换为下一个值

Ctrl + K Ctrl + X 删除行尾多余空格

Ctrl + K M 更改文件语言

导航

Ctrl + T 显示所有符号

Ctrl + G 跳转至某行

Ctrl + P 跳转到某个文件

Ctrl + Shift + O 跳转到某个符号

Ctrl + Shift + M 打开问题面板

F8 下一个错误或警告位置

Shift + F8 上一个错误或警告位置

Ctrl + Shift + Tab 编辑器历史记录

Alt + Left 后退

Alt + Right 前进

Ctrl + M 切换焦点

编辑器管理

Ctrl + F4, Ctrl + W 关闭编辑器

Ctrl + K F 关闭文件夹

Ctrl + \ 编辑器分屏

Ctrl + 1 切换到第一分组

Ctrl + 2 切换到第二分组

Ctrl + 3 切换到第三分组

Ctrl + K Ctrl + Left 切换到上一分组

Ctrl + K Ctrl + Right 切换到下一分组

Ctrl + Shift + PgUp 左移编辑器

Ctrl + Shift + PgDown 右移编辑器

Ctrl + K Left 激活左侧编辑组

Ctrl + K Right 激活右侧编辑组

文件管理

Ctrl + N 新建文件

Ctrl + O 打开文件

Ctrl + S 保存

Ctrl + Shift + S 另存为

Ctrl + K S 全部保存

Ctrl + F4 关闭

Ctrl + K Ctrl + W 全部关闭

Ctrl + Shift + T 重新打开被关闭的编辑器

Ctrl + K Enter 保持打开

Ctrl + Tab 打开下一个

Ctrl + Shift + Tab 打开上一个

Ctrl + K P 复制当前文件路径

Ctrl + K R 在资源管理器中查看当前文件

Ctrl + K O 新窗口打开当前文件

显示

F11 全屏、退出全屏

Shift + Alt + 1 切换编辑器分屏方式（横、竖）

Ctrl + + 放大

Ctrl + - 缩小

Ctrl + B 显示、隐藏侧边栏

Ctrl + Shift + E 显示资源管理器 或 切换焦点

Ctrl + Shift + F 显示搜索框

Ctrl + Shift + G 显示Git面板

Ctrl + Shift + D 显示调试面板

Ctrl + Shift + X 显示插件面板

Ctrl + Shift + H 全局搜索替换

Ctrl + Shift + J 显示、隐藏高级搜索

Ctrl + Shift + C 打开新命令提示符窗口

Ctrl + Shift + U 显示输出面板

Ctrl + Shift + V 显示、隐藏 Markdown预览窗口

Ctrl + K V 分屏显示 Markdown预览窗口

调试

F9 设置 或 取消断点

F5 开始 或 继续

F11 进入

Shift + F11 跳出

F10 跳过

Ctrl + K Ctrl + I 显示悬停信息

集成终端

Ctrl + ` 显示命令提示符窗口

Ctrl + Shift + ` 新建命令提示符窗口

Ctrl + Shift + C 复制所选内容

Ctrl + Shift + V 粘贴所选内容

Ctrl + Up 向上滚动

Ctrl + Down 向下滚动

Shift + PgUp 向上翻页

Shift + PgDown 向下翻页

Ctrl + Home 滚动到顶部

Ctrl + End 滚动到底部

修改默认快捷键

打开默认键盘快捷方式设置：

File -> Preferences -> Keyboard Shortcuts，或者：Alt+F -> p -> k

修改 keybindings.json：


// Place your key bindings in this file to overwrite the defaults
[
    // ctrl+space 被切换输入法快捷键占用
    {
        "key": "ctrl+alt+space",
        "command": "editor.action.triggerSuggest",
        "when": "editorTextFocus"
    },
    // ctrl+d 删除一行
    {
        "key": "ctrl+d",
        "command": "editor.action.deleteLines",
        "when": "editorTextFocus"
    },
    // 与删除一行的快捷键互换
    {
        "key": "ctrl+shift+k",
        "command": "editor.action.addSelectionToNextFindMatch",
        "when": "editorFocus"
    },
    // ctrl+shift+/多行注释
    {
        "key":"ctrl+shift+/",
        "command": "editor.action.blockComment",
        "when": "editorTextFocus"
    },
    // 定制与 sublime 相同的大小写转换快捷键，需安装 TextTransform 插件
    {
        "key": "ctrl+k ctrl+u",
        "command": "uppercase",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+k ctrl+l",
        "command": "lowercase",
        "when": "editorTextFocus"
    }
]
时间： 2024-09-30 15:22:16

vscode配置和插件的相关文章

VSCode配置Go插件和第三方拓展包

前言 VSCode现在已经发展的相当完善,很多语言都比较推荐使用其来编写,Go语言也一样,前提你电脑已经有了Go环境和最新版本的VSCode 插件安装 直接在拓展插件中搜索Go,就可以安装Go插件 安装之后vscode会弹出该插件还需安装一些扩展工具支持,但是这些工具往往会下载失败,或者仅仅成功一部分 比如: Installing github.com/nsf/gocode FAILED Installing github.com/uudashr/gopkgs/cmd/gopkgs FAILED

VSCode配置python插件

之前ubuntu出了点问题, dpkg用不了导致装不上VSCode, 今天重启突然好了, 然后就果断弃vim了. Conda env 因为用的conda管理虚拟环境, 需要设置python路径, 我这里是 "python.pythonPath": "/home/ichn/Software/anaconda3/envs/p36/bin/python", 原文地址:https://www.cnblogs.com/ichn/p/8313052.html

vscode的vetur插件提示 [vue-language-server] Elements in iteration expect to have 'v-bind:key' directives错误的解决办法

1.使用VS Code 出现如下问题,如图 Vue 2.2.0+的版本里,当在组件中使用v-for时,key是必须的. 2.更改vetur配置 vscode->文件->首选项->用户设置 找到 "vetur.validation.template" 改为false "vetur.validation.template": false vscode的vetur插件提示 [vue-language-server] Elements in iterati

VSCode配置python调试环境

VSCode配置python调试环境 一.安装好Python环境 二.下载VSCode  下载地址:https://code.visualstudio.com/download 三 .安装VSCode 安装完后是英文版本,需要安装中文(简体)语言包插件,如下图.然后重新启动VSCode就是中文版本了. 另外建议安装如下几个插件,在编程中可以提示代码. 四.设置编辑区与终端体 复制如下代码到用户设置中,设置编辑区字体及终端字体大小,及Python的默认路径 1 "editor.fontSize&q

VSCODE 配置eslint规则和自动修复

VSCODE 配置eslint规则和自动修复 vscode安装以下插件 EsLint.vetur.Prettier - Code formatter vscode设置了添加配置项,,默认会去查找你项目中的eslint配置文件 { "workbench.iconTheme": "material-icon-theme", "explorer.confirmDragAndDrop": false, "explorer.confirmDele

把VSCode配置成C/C++开发IDE

工作一年多了,大学学的数据结构和算法都忘得差不多了.于是想补补数据结构知识,并且刷一下剑指offer的一些面试题.首要问题就是装个C语言的运行环境,大学学C语言和C++的时候都是用的VC++6.0或者CodeBlocks,优点是不需要配置环境,但是缺点也很明显,就是代码没智能提示,编辑器UI风格还是零几年的.现在的好用又好看的编辑器有很多,比如Vscode,Sublime,atom.只要装上C语言的windows运行环境(  1.MinGw  2.cygwin),再在编辑器上装上C/C++插件,

用VScode配置Python开发环境

引用:https://www.jianshu.com/p/506debe61423 前言 VScode是一个相当优秀的IDE,具备开源.跨平台.模块化.插件丰富.启动时间快.颜值高.可高度定制等等优秀的特质,不愧是微软爸爸的私生子. 所以用VScode来编写Python,也是相当的好用的. 所以,今天我们就来讲讲,怎么在VScode上配置Python开发环境. 软件准备 首先,我们必须先下载好Python的安装包和VScode的安装包. 下载地址如下: Python:https://www.py

Mac上利用VScode配置c/c++开发环境

Mac上利用VScode配置c/c++开发环境 哭辽,Typora里面最好不要插入表情,不然保存会闪退 首先你要有一个vscode 在扩展里面下载c/c++ 第一步 ?+com+p 打开命令模式:选择c/c++: 编辑配置(edit configuration) 然后再自动生成的.vscode目录,打开c_cpp_properties.json.利用老哥的文件示例: { "configurations": [ { "name": "Mac", &

如何在Eclipse正确安装配置PyDev插件的官方教程，以及error 问题的解决方法：

官方教程; 1 1 This manual assumes that you have already have Python and/or Jython and/or IronPython installed in your machine, as well as Eclipse. Manual topics: Installing from update site and zips uninstalling Configuring the interpreter specify the py