柠栀

vscode插件及配置

2022/8/27 vscode

介绍

个人习惯使用的 vscode 插件及配置

# 通用插件推荐

# 别名路径跳转

  • 功能: 别名路径跳转插件，支持任何项目
  • setting 配置
  // 文件名别名跳转
  "alias-skip.mappings": {
    "@": "/src",
    "assets": "/src/assets",
  },
1
2
3
4
5

# path-alias

  • 功能: 在导入组件的时候，使用别名路径没用提示时 (可和别名路径跳转同时使用, 无冲突)
  • setting 配置
  "pathAlias.aliasMap": {
    "@": "${cwd}/src"
  }
1
2
3

# Prettier - Code formatter

  • 功能: 代码美化，自动格式化成规范格式
  • setting 配置
{
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 4,
  // #每次保存的时候自动格式化
  "editor.formatOnSave": true,
  // #每次保存的时候将代码按eslint格式进行修复
  // "eslint.autoFixOnSave": true,
  // #去掉代码结尾的分号
  "prettier.semi": false,
  // #使用带引号替代双引号
  "prettier.singleQuote": true,
  // #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // #让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_line_length": 220,
      "wrap_attributes": "false",
      "end_with_newline": false
      // #vue组件中html代码格式化样式
    },
    "prettier": {
      "semi": false, //不使用分号结尾
      "singleQuote": true, //使用单引号
      "eslintIntegration": false //开启 eslint 支持
    }
  },
  // 格式化stylus, 需安装Manta's Stylus Supremacy插件
  "stylusSupremacy.insertColons": false, // 是否插入冒号
  "stylusSupremacy.insertSemicolons": false, // 是否插入分号
  "stylusSupremacy.insertBraces": false, // 是否插入大括号
  "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
  "stylusSupremacy.insertNewLineAroundBlocks": false,
  "explorer.confirmDelete": false, // 两个选择器中是否换行
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "workbench.iconTheme": "vscode-icons",
  "files.autoSave": "off",
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "diffEditor.ignoreTrimWhitespace": false,
  "window.zoomLevel": 0,
  "atomKeymap.promptV3Features": true,
  "editor.multiCursorModifier": "ctrlCmd",
  "editor.formatOnPaste": true,
  "guides.enabled": false,
  "eslint.format.enable": true,
  //autoFix默认开启，只需输入字符串数组即可
  "eslint.validate": ["javascript", "vue", "html"],
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.fontSize": 16,
  "vetur.validation.template": false,
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  // 关闭eslint 语法检测
  "eslint.enable": false,
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "diffEditor.wordWrap": "off"
}
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

此外还要在项目根目录创建.prettierrc.js 或 .prettierrc 文件 (后者不能写注释) 官方配置文档 (opens new window)

module.exports = {
  // 一行最多字符
  printWidth: 180,
  // 使用 2 个空格缩进
  tabWidth: 2,
  // 不使用缩进符，而使用空格
  useTabs: false,
  // 行尾需要有分号
  semi: false,
  // 使用单引号
  singleQuote: true,
  // 对象的 key 仅在必要时用引号
  quoteProps: 'as-needed',
  // jsx 不使用单引号，而使用双引号
  jsxSingleQuote: false,
  // 末尾不需要逗号
  trailingComma: 'none',
  // 大括号内的首尾需要空格
  bracketSpacing: true,
  // jsx 标签的反尖括号需要换行
  jsxBracketSameLine: false,
  // 箭头函数，只有一个参数的时候，也需要括号  always需要  avoid不需要
  arrowParens: 'avoid',
  // 每个文件格式化的范围是文件的全部内容
  rangeStart: 0,
  rangeEnd: Infinity,
  // 不需要写文件开头的 @prettier
  requirePragma: false,
  // 不需要自动在文件开头插入 @prettier
  insertPragma: false,
  // 使用默认的折行标准
  proseWrap: 'preserve',
  // 根据显示样式决定 html 要不要折行
  htmlWhitespaceSensitivity: 'ignore',
  // 是否缩进 Vue 文件中的代码<script>和<style>标签内的内容
  vueIndentScriptAndStyle: false,
  // 在 HTML、Vue 和 JSX 中每行强制执行单个属性。
  singleAttributePerLine: false,
  ignorePath: '.gnore',
  // 换行符使用 lf
  endOfLine: 'auto',
  eslintIntegration: false
}
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

排除文件某些需要在项目根目录创建 .prettierignore

node_modules
dist
1
2

vscode 配置 ctrl + shift + p 可以打开配置页面
Editor: Format On Save 需要勾上
Editor: Default Formatter 选择 Prettier - Code formatter

# EditorConfig for VS Code

  • 功能: 每次创建文件时配置编辑器参数
  • 项目根目录创建 .editorconfig
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
1
2
3
4
5
6
7

# Auto Rename Tag

  • 功能：自动重命名标签

# Code Runner

  • 功能：代码 js 运行

右键 Run Code 或者 ctrl + alt + n 或者 右上角 Code Runner 按钮

# Live Server

  • 功能：热更新 html 代码

html 文件 右键 open with live server 或者 alt + l、alt + o

# CodeIf

  • 功能：变量起名的神器

选中文字右键选择 CodeIf

# koroFileHeader

  • 功能：自动添加文件头部信息、函数注释、图案注释
  • setting 配置
// 头部注释
"fileheader.customMade": {
    // Author字段是文件的创建者 可以在specialOptions中更改特殊属性
    // 公司项目和个人项目可以配置不同的用户名与邮箱 搜索: gitconfig includeIf  比如: https://ayase.moe/2021/03/09/customized-git-config/
    // 自动提取当前git config中的: 用户名、邮箱
    "Author": "git config user.name && git config user.email", // 同时获取用户名与邮箱
    // "Author": "git config user.name", // 仅获取用户名
    // "Author": "git config user.email", // 仅获取邮箱
    // "Author": "OBKoro1", // 写死的固定值 不从git config中获取
    "Date": "Do not edit", // 文件创建时间(不变)
    // LastEditors、LastEditTime、FilePath将会自动更新 如果觉得时间更新的太频繁可以使用throttleTime(默认为1分钟)配置更改更新时间。
    "LastEditors": "git config user.name && git config user.email", // 文件最后编辑者 与Author字段一致
    // 由于编辑文件就会变更最后编辑时间，多人协作中合并的时候会导致merge
    // 可以将时间颗粒度改为周、或者月，这样冲突就减少很多。搜索变更时间格式: dateFormat
    "LastEditTime": "Do not edit", // 文件最后编辑时间
    // 输出相对路径，类似: /文件夹名称/src/index.js
    "FilePath": "Do not edit", // 文件在项目中的相对路径 自动更新
    // 插件会自动将光标移动到Description选项中 方便输入 Description字段可以在specialOptions更改
    "Description": "", // 介绍文件的作用、文件的入参、出参。
    // custom_string_obkoro1~custom_string_obkoro100都可以输出自定义信息
    // 可以设置多条自定义信息 设置个性签名、留下QQ、微信联系方式、输入空行等
    "custom_string_obkoro1": "",
    // 版权声明 保留文件所有权利 自动替换年份 获取git配置的用户名和邮箱
    // 版权声明获取git配置, 与Author字段一致: ${git_name} ${git_email} ${git_name_email}
    "custom_string_obkoro1_copyright": "Copyright (c) ${now_year} by ${git_name_email}, All Rights Reserved. "
    // "custom_string_obkoro1_copyright": "Copyright (c) ${now_year} by 写死的公司名/用户名, All Rights Reserved. "
},
// 函数注释
"fileheader.cursorMode": {
    "description": "", // 函数注释生成之后，光标移动到这里
    "param": "", // param 开启函数参数自动提取 需要将光标放在函数行或者函数上方的空白行
    "return": "",
},
// 插件配置项
"fileheader.configObj": {
    "autoAdd": true, // 检测文件没有头部注释，自动添加文件头部注释
    "autoAddLine": 100, // 文件超过多少行数 不再自动添加头部注释
    "autoAlready": true, // 只添加插件支持的语言以及用户通过`language`选项自定义的注释
    "supportAutoLanguage": [], // 设置之后，在数组内的文件才支持自动添加
   // 自动添加头部注释黑名单
   "prohibitAutoAdd": [
      "json"
    ],
   "prohibitItemAutoAdd": [ "项目的全称禁止项目自动添加头部注释, 使用快捷键自行添加" ],
   "folderBlacklist": [ "node_modules" ], // 文件夹或文件名禁止自动添加头部注释
   "wideSame": false, // 头部注释等宽设置
   "wideNum": 13,  // 头部注释字段长度 默认为13
    "functionWideNum": 0, // 函数注释等宽设置 设为0 即为关闭
   // 头部注释第几行插入
    "headInsertLine": {
      "php": 2 // php文件 插入到第二行
    },
    "beforeAnnotation": {}, // 头部注释之前插入内容
    "afterAnnotation": {}, // 头部注释之后插入内容
    "specialOptions": {}, // 特殊字段自定义 比如: Author、LastEditTime、LastEditors、FilePath、Description、Date等
    "switch": {
      "newlineAddAnnotation": true // 默认遇到换行符(\r\n \n \r)添加注释符号
    },
    "moveCursor": true, // 自动移动光标到Description所在行
    "dateFormat": "YYYY-MM-DD HH:mm:ss",
    "atSymbol": ["@", "@"], // 更改所有文件的自定义注释中的@符号
    "atSymbolObj": {}, //  更改单独语言/文件的@
    "colon": [": ", ": "], // 更改所有文件的注释冒号
    "colonObj": {}, //  更改单独语言/文件的冒号
    "filePathColon": "路径分隔符替换", // 默认值： mac: / window是: \
    "showErrorMessage": false, // 是否显示插件错误通知 用于debugger
    "writeLog": false, // 错误日志生成
    "CheckFileChange": false, // 单个文件保存时进行diff检查
    "createHeader": false, // 新建文件自动添加头部注释
    "useWorker": false, // 是否使用工作区设置
    "designAddHead": false, // 添加注释图案时添加头部注释
    "headDesignName": "random", // 图案注释使用哪个图案
    "headDesign": false, // 是否使用图案注释替换头部注释
    // 自定义配置是否在函数内生成注释 不同文件类型和语言类型
    "cursorModeInternalAll": {}, // 默认为false 在函数外生成函数注释
    "openFunctionParamsCheck": true, // 开启关闭自动提取添加函数参数
    "functionParamsShape": ["{", "}"], // 函数参数外形自定义
    // "functionParamsShape": "no type" 函数参数不需要类型
    "functionBlankSpaceAll": {}, // 函数注释空格缩进 默认为空对象 默认值为0 不缩进
    "functionTypeSymbol": "*", // 参数没有类型时的默认值
    "typeParamOrder": "type param", // 参数类型 和 参数的位置自定义
    "NoMatchParams": "no show param", // 没匹配到函数参数，是否显示@param与@return这两行 默认不显示param
    "functionParamAddStr": "", // 在 type param 后面增加字符串 可能是冒号，方便输入参数描述
    // 自定义语言注释，自定义取消 head、end 部分
    // 不设置自定义配置language无效 默认都有head、end
    "customHasHeadEnd": {}, // "cancel head and function" | "cancel head" | "cancel function"
    "throttleTime": 60000, // 对同一个文件 需要过1分钟再次修改文件并保存才会更新注释
     // 自定义语言注释符号，覆盖插件的注释格式
    "language": {
        // js后缀文件
        "js": {
            "head": "/$$",
            "middle": " $ @",
            "end": " $/",
            // 函数自定义注释符号：如果有此配置 会默认使用
            "functionSymbol": {
              "head": "/******* ", // 统一增加几个*号
              "middle": " * @",
              "end": " */"
            },
            "functionParams": "typescript" // 函数注释使用ts语言的解析逻辑
        },
       // 一次匹配多种文件后缀文件 不用重复设置
       "h/hpp/cpp": {
          "head": "/*** ", // 统一增加几个*号
          "middle": " * @",
          "end": " */"
        },
        // 针对有特殊要求的文件如：test.blade.php
        "blade.php":{
          "head": "<!--",
          "middle": " * @",
          "end": "-->",
        }
    },
 // 默认注释  没有匹配到注释符号的时候使用。
 "annotationStr": {
      "head": "/*",
      "middle": " * @",
      "end": " */",
      "use": false
    },
}
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
  • 图案注释
// 如果想要使用 图案 注释，比如 佛祖，可以在 fileheader.configObj 属性中修改配置
"fileheader.configObj": {
   "headDesignName": "buddhalImg" // 默认为随机图案 random, 可修改 buddhalImg 代表佛祖
}
// 其他图案参数
// 'random', // 随机
// 'buddhalImg', // 佛祖
// 'buddhalImgSay', // 佛祖+佛曰
// 'buddhalSay', // 佛曰
// 'totemDragon', // 龙图腾
// 'belle', // 美女
// 'coderSong', // 程序员之歌
// 'loitumaGirl', // 甩葱少女
// 'keyboardAll', // 全键盘
// 'keyboardSmall', // 小键盘
// 'totemWestDragon', // 喷火龙
// 'jesus', // 耶稣
// 'dog', // 狗
// 'grassHorse', // 草泥马
// 'grassHorse2', // 草泥马2
// 'totemBat', // 蝙蝠
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

头部注释: 快捷键 ctrl+win+i
函数注释: 鼠标的光标放在函数名称行上 快捷键 ctrl+win+t
图案注释: 快捷键 ctrl+win+j

# GitHub Copilot

  • 功能：非常强大的代码提示工具 (就是需要超能力，可能会有 60 天的试用期)

使用 copilot (opens new window)非常简单，你要从思想上把 copilot 理解为一个站在你旁边的同事，在你敲代码时，他会给你自动提醒。注意：这种提醒不是简单的代码片段，而是完整的业务代码逻辑。

# Vue 开发推荐

# vue-component

  • 功能：输入组件名称自动导入找到的组件，自动导入路径和组件

# Vetur

  • 开发 Vue 必备

# Vue 3 Snippets

  • 基本必备：很多 Vue 的代码段，很方便开发

# React 开发推荐

# React Style Helper

  • 功能：在 React 中更快速地编写内联样式，并对 CSS、LESS、SASS 等样式文件提供强大的辅助开发功能
    • 自动补全
    • 跳转至样式和变量定义位置
    • 创建 JSX/TSX 的行内样式
    • 预览样式及变量内容
    • 行内样式自动补全，同时支持 SASS 变量的跳转及预览。

# ES7+ React/Redux/React-Native snippets

  • 功能：很多 React 的代码段，很方便开发

# vscode-styled-components

  • 功能：在 JS 文件中写样式时，有智能提示

# 主题类

# Dracula Official

# One Dark Pro

# vscode-icons

window配置