Vscode基础配置，常用插件安装，配置等

炎垚

已于 2023-09-30 11:00:06 修改

阅读量290

点赞数

分类专栏：软件工具文章标签： vscode ide 编辑器

于 2023-09-30 10:53:08 首次发布

本文链接：https://blog.csdn.net/Joeysn/article/details/133418730

版权

软件工具专栏收录该内容

1 篇文章 0 订阅

订阅专栏

VsCode软件很好用，灵活方便，但对新手来说真正用好很难，我在使用过程总价一下内容，供大家参考，欢迎大家建议留言

一、必装插件

1、中文语言包
Chinese (Simplified) (简体中文)
在这里插入图片描述
2、代码格式化（排列整齐，查错），需要设置，如format部分的设置default ，on save
Prettier - Code formatter

3、语法检查，与prettier一起使用，而且配置一致
ESLint

4、css 编辑引用
Linked Editing 查看定义的css内容
在这里插入图片描述
5、IntelliSense for CSS class names in HTML
css 类名提示补全，使用space键

6、导入快捷
JavaScript (ES6) code snippets 引入import快捷

7、实时查看
Live Server

8、直接运行编译
Code Runner

9、scss编译
SCSS Formatter

10、GitLens
提交代码到github或者gitee
在这里插入图片描述

二、vue3+ts环境+uni-app

1、语法高亮、智能感知、Emmet等，
注意，如果装了vetur，请在项目中工作区禁用，vetur是vue2，与vue3冲突
Vue Language Features (Volar)
在这里插入图片描述
2、vue ts
TypeScript Vue Plugin (Volar)

3、uniapp相关（uniapp的很多插件解决多端的重复代码，还是很好用的，可以使用HBuilderX 进行开发项目）

3.1 创建uni-app页面 uni-create-view
在这里插入图片描述
3.2 uni提示插件 uni-helper 可以直接到达文档

3.3 uniapp小程序扩展

4、vue代码段
Vue 3 Snippets

三、实用工具插件

1、免费Ai编程
CodeGeeX
在这里插入图片描述
2、图片预览
Image preview

3、文件目录图标 --可以不装
Material Icon Theme

4、在线翻译
Code Translate

5、代码截图
CodeSnap

6、正则预览
Regex Previewer

7、错误提示行
Error Lens

四、其他的插件

sass编译
Live Sass Compiler
在这里插入图片描述
html网页制作
HTML CSS Support

五、不需要的流行插件

已经集成的插件
1、HTML Snippets html支持语言包
在这里插入图片描述
2、路径自动导入 Path Intellisense

3、括号变色 Bracket Pair Color DLW
配置搜索Bracket Pair

4、关闭标签 Auto Close Tag

5、修改标签 Auto Rename Tag
vscode需要修改配置 Linked Editing

在这里插入图片描述

六、相关配置

1、用户代码片段自定义快捷代码块

//新建一个文件
{
	// vue3格式
	"Print to console": {
		"prefix": "vue3",
		"body": [
			"<script lang=\"ts\" setup>$0</script>"
			"$2"
			"<template>"
 			"	<view>$1</view>"
			"</template>"
	 		"$2"
			"<style scoped></style>"
			"$2"
		],
		"description": "vue3"
	},
}

//新建一个文件
{
	// 使用api getData
	"Print to console": {
		"prefix": "gta",
		"body": [
			"const get$0Data = async () => {"
      "  const res = await getAPI()"
      "  //console.log(res.result)"
      "}"
		],
	"description": "const api"
	},
}

//新建一个文件
{
  // 创建api getApi
	"Print to console": {
		"prefix": "gpi",
		"body": [
			"export const get$0API = () => {"
      "  return http({"
      "     method: 'GET',"
      "     url: Api.,"
      "  })"
      "}"
		],
	"description": "const api"
	},
}

//新建一个文件
{
  // 箭头函数
	"Print to console": {
		"prefix": "jt",
		"body": [
			"()=>{$1}"
		],
	"description": "jt"
	},  
}

2、相关setting配置
vscode的setting配置，工作区配置（项目下的.vscode文件内）在项目中会覆盖用户默认的配置，但是不影响用户在其他项目中使用。工作区域配置是为了让团队协作时候，大家使用统一标准

{
   //自动保存，电脑配置低的建议不开启
  "files.autoSave": "afterDelay",
  //鼠标滚轮放大缩小
  "editor.mouseWheelZoom": true,
  //编辑区字体大小
  "editor.fontSize": 20,
  //tab键距离，默认是4
  "editor.tabSize": 2,
  //格式化代码
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.formatOnType": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.format.enable": true,
  "prettier.endOfLine": "auto",
  //自动折行
  "editor.wordWrap": "on",
  //括号对的设置，代替Bracket Pair Color DLW插件，括号深度变化颜色
  "editor.guides.bracketPairs": true,
  //修改标签结束部分补全，代替Auto Rename Tag插件
  "editor.linkedEditing": true,
  //uniapp小程序插件设置
  "create-uniapp-view.template": "vue3",
  "create-uniapp-view.directory": true,
  "create-uniapp-view.name": "与文件夹同名",
  //按需待补充
}