VSCode-实用插件

最新推荐文章于 2024-07-13 11:16:40 发布

foocode

最新推荐文章于 2024-07-13 11:16:40 发布

阅读量2k

点赞数 59

分类专栏：提高工作效率文章标签： vscode 编辑器前端

本文链接：https://blog.csdn.net/weixin_46913024/article/details/139466167

版权

提高工作效率专栏收录该内容

2 篇文章 0 订阅

订阅专栏

起因：借助插件，统一团队的代码格式，不然上传到git上的代码一片爆红，修改的代码段落也不明显，看着不清爽。遂整理一下VSCode编辑器的实用插件。

Visual Studio Code - Code Editing官网

一共6个实用插件介绍

1.Chinese (Simplified) (简体中文)

2.vscode-icons官方图标库

3.Prettier - 格式化代码

4.koroFileHeader生成注释

5.Tabnine: AI Autocomplete

6.GitLens — Git supercharged可视化版本控制插件

1.Chinese (Simplified) (简体中文)

作用：汉化编辑器界面，适合不熟悉英文的宝宝们。
使用：按下“Ctrl+Shift+P”组合键以显示“命令面板”，然后点击“Configure Display Language”显示语言列表，选择所需即可。
url：在这里
效果：

2.vscode-icons官方图标库

作用：更好看，没别的。
使用：点击“Set File Icon Theme”即可。
url：在这里
效果：

3.Prettier - 格式化代码

作用：自动格式化代码，统一配置，规范团队项目格式。如果是vue项目，可以结合ESLint、Vetur两个插件一起使用。
url：在这里
使用：

//第一种方法：全局配置，在settings.json文件中
{
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "prettier.singleAttributePerLine": true, //对属性进行换行
    "prettier.singleQuote": true,  //使用单引号代替双引号
    "prettier.jsxSingleQuote": true, //在jsx中使用单引号代替双引号
    "prettier.useEditorConfig": false, //不使用editorConfig配置文件中的设置 
}

//第二种方法：局部配置，在项目根目录新建.prettierrc文件
{
  "semi": false, //句末不使用分号
  "tabWidth": 2, //缩进长度
  "singleQuote": true, //使用单引号
  "printWidth": 150, //单行长度
  "trailingComma": "none", //多行时句尾加句号
  "singleAttributePerLine": true //对属性进行换行
  "useTabs": false, //使用空格代替tab缩进
  "jsxSingleQuote": true, // jsx中使用单引号
  "bracketSpacing": true, //在对象前后添加空格 eg: { foo: bar }
  "arrowParens": "always", //单参数箭头函数参数周围使用圆括号-eg: (x) => x
}

每个人的开发习惯不同，共同开发一个项目会导致修改后代码在格式上的不统一。此篇博文起因的解决方法，除了规范格式化插件的使用，还需配置.editorconfig文件。

在项目根目录直接输入.editorconfig名称，按enter会自动生成文件。

//使用实例
[*.{js,jsx,ts,tsx,vue}] #表示要匹配的文件类型
charset = utf-8 #字符编码格式
indent_style = space #缩进风格，space表示基于空格做缩进
indent_size = 2 #缩进大小，2表示缩进2个单位
insert_final_newline = true #当创建文件时是否自动在文件末尾添加一个新行，true表示自动添加
trim_trailing_whitespace = true #是否自动移除行尾多余空格，true表示自动移除

4.koroFileHeader生成注释

作用：自动生成文件头部注释，包含文件的创建者、创建时间、文件路径、修改者等信息；也可生成函数注释，让开发者一目了然。
url：在这里
使用：

//全局配置，在setting.json中添加以下配置
//头部注释 windows快捷键：ctrl+win+i
"fileheader.customMade": {
         "Author": "git config user.name && git config user.email", // 同时获取用户名与邮箱
         "Date": "Do not edit",
         "LastEditors": "git config user.name && git config user.email",
         "LastEditTime": "Do not edit",
         "FilePath": "Do not edit",
         "Description": ""
    },
//函数注释 windows快捷键：ctrl+win+t
"fileheader.cursorMode": {
         "Description": "",
         "param":"",
         "return":"",
    },