vscode入门之安装eslint，prettier,vetur，多行编辑等基本快捷键

最新推荐文章于 2025-04-10 10:24:58 发布

qq_35125764

最新推荐文章于 2025-04-10 10:24:58 发布

阅读量1.7k

点赞数 1

分类专栏：工具文章标签： vscode

本文链接：https://blog.youkuaiyun.com/qq_35125764/article/details/120265409

版权

工具专栏收录该内容

2 篇文章

订阅专栏

这篇博客介绍了如何在VSCode中安装和配置eslint、prettier、vetur等插件，包括自动格式化、标签自动补全和Git工具。同时，详细讲解了多行编辑的快捷键，如同时添加光标、竖列选择等，提升编码效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

eslint插件安裝

左侧Extensions中下载eslint插件
npm全局下载eslint, 并进行初始化
安裝和执行

 npm install eslint -g
 eslint --init

打开 file -> preferences -> settings
搜索eslint 找到里面的Eslint Options 点击 Edit in settings.json,

 "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue-html",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "eslint.run": "onSave",
  "eslint.options": {
    "config-file": "F:\\work\\web-visualization\\.eslintrc.js"//配置的eslint配置规则
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }

根据自己喜好配置.eslintrc.js规则文件
配置格式化-ESLint 需要手动开启，Ctrl+, 打开设置，开启：

在这里插入图片描述
7.设置快捷键
Ctrl + k Ctrl + S设置ESLint fix 快捷键：（自启动ctrl+s也会自动格式化）

2.prettier

Prettier 安装后会默认启用。使用 Shift + Alt + F 格式化的配置就是它。

3.vetur

在Vscode的扩展中搜索Vetur，我们来看一下Vetur的介绍说明，特征(features)就是语法突出显示，错误提示，格式化，自动完成等，这里主要是用来处理vue文件。
vue文件和js文件中，都有语法高亮表示了，但是没有自动格式化。我们需要在vscode中修改一项配置，如下图
在这里插入图片描述
再打开App.vue后，可以分别对和

我们开始配置Vetur中的风格处理，无论是Vetur官网，还是vscode设置中显示，vetur的formatter大多采用的Prettier风格。有2个地方可以进行配置prettier风格参数，一个是vscode的配置文件settings.json，还有一个就是在项目根目录下创建.prettierrc文件，文件内容也是采用json格式，但是需要注意：根据官网的说明，一旦在项目的根目录下存在.prettierrc文件，则settings.json中的prettier配置就会无效。

3. Auto Rename Tag

修改html标签自动补全，改了首标签，尾部自动变。webstrom自带

4.GitLens — Git supercharged

可以查看git所有提交记录，并且代码上面自动有提示

5. git history 一个可以可视化查看git 历史记录的工具

安装完成后在源代码管理上会多出一个图标
在这里插入图片描述
在这里可以查看git节点的变化

5.vscode-elm-jump

常规的代码跳转定义，按ctrl，和webstrom一样

6.Vue CSS Peek

和webstrom一样，按ctrl可以跳转css定义，按ctrl，和webstrom一样

7.vue-helper

让你在vue单文件里面的变量函数跳转定义，按ctrl，和webstrom一样
快捷键ctrl+space 打开自定义组件属性展示面板
快捷键 alt+shift+enter 自动导入import

但是我们在快捷跳转定义之后，是不是想着再跳回去。webstrom上面直接ctrl+z就回去了。
vscode：alt+左键或者右键（上下左右的那个），就可以往前或者往后了。

vscode中好用的快捷键

查找:ctrl+f
全局查找:ctrl+shif+f
打开terminal: ctrl+`
打开设置：ctrl+,
装了prettier 之后格式化shift+alt+f
逐一查找并选中，您选中的内容： ctrl+d(先ctrl+f查找内容，再按ctrl+D去选中查找的内容，但是没法编辑)
选中多行同时编辑：Alt + 鼠标点击，在每一个点击的地方添加输入光标
如图：
竖列多行选择。先选择起始点，然后按住 Alt + Shift 加上左键按住拖动

在这里插入图片描述
9. 选中多个竖行，先选择起始点，然后按住 Alt + Shift 点击结束光标位置，同一位置所有竖行添加光标

10. 选中多个相同字符多行编辑
1、使用鼠标选中冒号
2、ctrl + shift + L
3、使用键盘左右箭头 ← → 可以移动至需要位置
4、输入需要的数值
光标放在一个地方，按ctrl+shift+L或者ctrl+f2，可以在页面中出现这个词的不同地方都出现光标。有时候这个快捷键的作用和f2重命名变量类似，但是它更加广泛，因为还可以对比如字符串相同的非同一变量或函数类的东西修改。在这里插入图片描述
11. 选中一个变量，按f2 或者按 Fn + f2，也可以实现所有变量重命名，和10的功能有点相似
12. 按住Ctrl + Alt，再按键盘上向上或者向下的键，可以使一列上出现多个光标。
13. 选中一段文字，按shift+alt+i，可以在每行末尾出现光标
14. ctrl+p，查找文件
在这里插入图片描述