下载方式

官方下载地址
 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

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

自定义模板

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

{
    "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;，然后重启

复制相对路径改/

打开设置，搜索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
}

无法使用终端命令问题

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

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