前言

一些 VSCode 插件和配置记录

插件

相关插件配置

  1. 别名路径跳转 – @在项目中可以跳转（暂没配置）

  2. 翻译(英汉词典) –翻译（不用配置）

  3. Auto Rename Tag –HTML前后自动修改（不用配置）

  4. Chinese (Simplified) (简体中文) –不用配置

  5. Code Spell Checker – 代码单词拼写检查

    遇到不应该报错的单词需要配置 如：vuex（右键选择Ignore Words -> 添加到User里）

  6. DotENV – 环境变量文件支持插件

  7. EditorConfig for Vs Code –配和项目中的编辑器.editorconfig文件使用（统一编辑器代码格式化）

  8. ESlint –js语法检查配和.eslintrc.js使用（暂未配置）

  9. JetBrains Icon Theme – 文件图标插件

  10. Live Sass Compiler – 将scss转成css

    配置不生成map文件

  11. Live Server – 代理服务器HTML打开浏览器（自动监听变化

    插件配置默认打开浏览器为Chrome

  12. Luke Dark Theme – 主题插件

  13. Path Intellisense – 路径查找插件

    配置@别名提示

    1
    2
    3
    4
    // settings.json文件
    "path-intellisense.mappings": {
            "@": "${workspaceRoot}/src"
    },

  14. prettier - Code formatter –代码格式化（暂未配置）

  15. Sass – 识别scss文件语法检查

  16. SCSS Formatter – SCSS的格式化插件

  17. Todo Highlight – 高亮Todo（已弃用改为Better Comments）

  18. Vetur – 识别Vue文件（同时也有vue格式化的功能）

  19. Vue 3 Snippets – 代码片段提示

其他配置

1.快捷键

  1. 单行代码注释：Ctrl+/
  2. 多行注释：Ctrl+Shift+/
  3. 格式化代码：Ctrl+Alt+L
  4. 向下复制行：Ctrl+Alt+Up
  5. 向上复制行：Ctrl+Alt+Down
  6. 删除行：Ctrl+Alt+Backspace
  7. 查找文本：Ctrl+F
  8. 代码全部折叠：Ctrl Alt -
  9. 代码全部展开：Ctrl Alt +
  10. 代码右移：Tab键（快捷生成代码）
  11. 代码左移：Shift+TAB键
  12. 代码上移：Alt+方向键上
  13. 代码下移：Alt+方向键下
  14. 长按Alt+鼠标点击不同处再放掉Alt，可以同时编辑多处
  15. 快速切换 Alt+left
  16. 终端清除 Ctrl k （设置 when 表达式：terminalFocus）

2.终端

终端默认选择cmd而不是powershell

3.代码片段

https://snippet-generator.app/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
{
    // 多行注释
    "Print to console": {
        "prefix": "///",
        "body": [
            "/** $1",
             "*",
             "*",
             "*/",
        ]
    }
}


{
    // 函数注释
    "Print to console": {
        "prefix": "///f",
        "body": [
            "/**",
            "* 函数名称{$1}",
            "* 函数简介{$2}",
            "* @param    参数{$3}    数据类型{${4|Boolean,Number,String,Object,Array,*|}}    是否必传{${5|是,否|}}    参数描述{$6}",
            "* @param    ...",
            "* @returns  返回值{${7|Boolean,Number,String,Object,Array,*|}}",
            "*/"             
        ],
    }
}


{
    // Vue模板
    "Print to console": {
        "prefix": "v1",
        "body": [
            "<template>",
            "  <div class=\"$TM_FILENAME_BASE\">",
            "    $1",
            "  </div>",
            "</template>\n",
            "<script>",
            "export default {",
            " name: '$TM_FILENAME_BASE',",
            "  data() {",
            "    return {\n",
            "    }",
            "  },",
            "  components: {},",
            "  watch: {},",
            "  mounted() {},",
            "  methods: {}",
            "}",
            "</script>\n",
            "<style scoped lang=\"scss\">\n",
            "</style>",
            "$0"
          ],
    }
}

// vue3 模板
{
  "Print to console": {
    "prefix": "vue3",
    "body": [
      "<template>",
      "  <div></div>",
      "</template>",
      "",
      "<script setup>",
      "import { ref, reactive, toRefs, onMounted, onBeforeMount, watch, watchEffect, computed, getCurrentInstance } from 'vue'",
      "import { useRoute, useRouter } from 'vue-router'",
      "const props = defineProps({})",
      "const emit = defineEmits(['x', 'xx'])",
      "",
      "const data = reactive({});",
      "onBeforeMount(() => {",
      "})",
      "onMounted(() => {",
      "})",
      "</script>",
      "<style lang='scss' scoped>",
      "</style>"
    ]
  }
}

console.log
{
  "Print to console": {
    "scope": "javascript,typescript",
    "prefix": "clog",
    "body": ["console.log($1)"],
    "description": "Log output to console"
  }
}

4.彩虹括号

1
2
3
// settings.json文件
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": "active",

5.@跳转

解决：安装别名跳转插件

补充

1.prettier - Code formatter –代码格式化

设置搜素format后：Editor:Default Formatter为Pretter为默认、Editor:Format On Save勾选。

2.JavaScript (ES6) code snippets 插件的安装

可以快速插入es6的代码

3.Better Comments插件

​ 注释高亮颜色并且支持TODO

4.eslint配置

1
2
3
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
}

5.开启eslint配置后prettier配置

​ 新建.prettierrc文件

1
2
3
4
5
6
7
8
9
{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 120,
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "semi": false
}

注意：直接在setting.json中配置无效，可能是和vetur冲突（但是官网配置还是无效）

优先级：

​ 1、项目目录的.prettierrc文件，支持json和分号格式（其实还有很多种）

​ 2、项目目录的.editorconfig文件（默认配置)

​ 3、vscode的配置文件（也有好几个地方配置，包括vetur节点下面）

6.TabNine插件安装

智能代码片段提示

7.安装Vue Language Features (Volar)

（使用时候需要关闭 vetur–不能同时使用）

8.安装 Error Lens

加强版的错误提示，直接显示在代码后面

9.安装Image preview图片预览功能

10.安装 TpyeScript Vue Plugin (Volar)

为 vscode 提供vue的TS代码提示等

11.安装 GitLens — Git supercharged

实时查看 git 提交记录（增强vscode 的 git 功能）

12.安装 vue-helper

vue代码函数可以跳转

13.安装 Stylelint

（fantastic-admin 开源项目样式规范）

14.安装 Markdown All in One

(vscode Markdown 增强插件)

15.安装 px to rem & rpx & vw (cssrem)

（px 转 rem、vw ）

16 安装 ChatGPT GPT-4

17 安装 Photonica 主题