下载方式

官方下载地址
 VScode国内下载方法：在没有梯子的情况下正常下载VsCode

Chinese

中文显示插件，通常都会安装

Live Server

调试静态页面可以使用，能将文件所在文件夹直接服务器方式打开到浏览器

One Dark Pro

个人最喜欢使用的主题

Markdown All in One

Markdown语法支持，这个是我使用最多的，通常记笔记都是使用的纯文本markdown，以前也使用Typora，后来习惯了纯markdown格式

Insert Date String

插入当前时间，个人用来配合markdown写文章用的，感觉非常便捷，快捷键CTRL + SHIFT + I

Vetur/Volar

Vue开发必备，语法提示和功能支持
Vue3使用Volar，不要安装Vetur

Auto Rename Tag

改标签自动调整

Material Icon Theme

Material风格的icon文件图标

vscode-element-helper

对element的语法支持

Path Autocomplete

能提示需要引入的文件，根据/提示，比较重要

HTML Snippets

完整的HTML代码提示，包括HTML5

HTML CSS Support

在 html 标签上写class 智能提示css样式

Beautify

格式化代码，使用快捷键是可以选择该格式化插件，更标准

ESlint

规范js代码书写规则，如果觉得太过严谨，可自定义规则

indent-rainbow

对代码前的空格进行着色，更明显看到缩进

Power Mode

打字特效

Path Intellisense

相对路径助手，通过./唤醒

自定义模板

文件 -> 首选项 -> 用户片段 -> 新代码片段

{
	"Print to console": {
		"prefix": "vuetemplate",
		"body": [
			"<template>",
			"  <div></div>",
			"</template>",
			"",
			"<script setup>",
			"import { ref, reactive } from 'vue'",
			"</script>",
			"",
			"<style scoped lang=\"sass\">",
			"",
			"</style>"
		],
		"description": "vue template"
	}
}

关闭文件目录自动定位跟踪

在设置中搜索explorer.autoReveal进行设置，在关闭或点击上方标签时做出目录会跟着定位

快捷键

快速复制：shift + alt + 下

侧边字体修改

找到文件VSCode安装路径 + resources\app\out\vs\workbench\workbench.desktop.main.css，搜索关键字.part>.content{，在13px后面添加;font-family: Helvetica;，然后重启

同理修改全局字体，格式化后在顶部加入

* {
  font-family: '霞鹜文楷等宽';
}

https://github.com/lxgw/LxgwWenKai

复制相对路径改/

打开设置，搜索explorer.copyRelativePathSeparator进行修改

使用Prettier进行自动格式化

先安装prettier插件，然后在.vscode/settings.json中加入以下内容，代表所有格式的文件都使用Prettier进行格式化

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Prettier配置格式

创建.prettierrc.cjs文件，使用cjs可以写注释

module.exports = {
  // 换行长度
  printWidth: 100,
  // 缩进空格数
  tabWidth: 2,
  // 不要使用制表符
  useTabs: false,
  // 结尾分号
  semi: false,
  // 使用单引号
  singleQuote: true,
  // 防止a标签自动换行
  htmlWhitespaceSensitivity: 'ignore',
  //结尾是否添加逗号
  trailingComma: 'none',
  //对象括号俩边是否用空格隔开
  bracketSpacing: true,
  //组件最后的尖括号不另起一行
  bracketSameLine: true,
  //箭头函数参数始终添加括号
  arrowParens: 'always',
  //html存在空格是不敏感的
  htmlWhitespaceSensitivity: 'ignore',
  //vue 的script和style的内容是否缩进
  vueIndentScriptAndStyle: false,
  //行结尾形式 mac和linux是\n  windows是\r\n
  endOfLine: 'auto',
  //组件或者标签的属性是否控制一行只显示一个属性
  singleAttributePerLine: false
}

新的VSCode好像不支持，改用.prettierrc.json

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": false,
  "singleQuote": true,
  "htmlWhitespaceSensitivity": "ignore",
  "trailingComma": "none",
  "bracketSpacing": true,
  "bracketSameLine": true,
  "arrowParens": "always",
  "vueIndentScriptAndStyle": false,
  "endOfLine": "auto",
  "singleAttributePerLine": false
}

无法使用终端命令问题

如果命令正确，需要以管理员的身份打开powerShell，然后输入：set-ExecutionPolicy RemoteSigned，输入A或者Y就可以了

这里错误由于命令错误，应该是npm run开头

缩放

设置中搜索zoom level

给md文件配置模板提示

Ctrl + Shift + P输入Preferences: Open User Settings (JSON)打开配置文件，加上以下代码：

"[markdown]": {
    "editor.wordWrap": "on",
    "editor.quickSuggestions": {
      "comments": "on",
      "strings": "on",
      "other": "on"
    }
  }

插件打包

npm install -g @vscode/vsce
vsce --version
vsce package

会在项目根目录生成一个.vsix文件