VSCode功能和插件自定义配置

一、基础功能增强插件

project manage：多项目管理。
Vim：编辑器之神。
Settings Sync：多终端同步vscode配置。
Code Runner：代码一键运行。
Tabnine AI Autocomplete for Javascr：智能代码补全
GitLens：git功能增强，显示git提交信息
Remote Development：此插件可连接编辑远程服务器上的文件。
Trailing Spaces：行尾空格高亮。
indent-rainbow：相同缩进，高亮显示。

二、前端开发用插件

1、HTML

暂无

2、JavaScript

Javascript (ES6) Code Snippets：JS、ES6 代码提示，快捷生成代码片段。
Parameter Hints：提示js函数的参数类型及消息
jQuery Code Snippets：jQuery代码片段

3、CSS

CSS Initial Value：显示每个CSS属性的初始值，当光标停留在css属性时
CSS Navigation ：提供从html跳转到css定义位置的跳转

4、Vue

Vetur：对.vue文件提供语法高亮显示等功能。
Vue 3 Snippets：对vue2和vue3，提供代码提示，快捷生成代码片段。
Auto Import：提示需要导入的包，回车后自动导入依赖包。
Import Cost：在行尾显示导入的包的大小。

5、前端开发功能增强

LiveServer：修改前端代码后，浏览器实时显示更改。
Open In Default Browser：右键菜单集成，在默认浏览器中打开当前文件。
Path Intellisense：输入路径时智能提示，自动补全。
Image Preview：点击图片路径，图片预览
vscode-faker：生成前端测试假数据，ctrl+shift+p 输入fake即可，选装。

三、美化插件

VSCode Great Icons、vscode-icons：漂亮的icon主题。
Fluent Icons：更漂亮的图标。

四、其他插件

Java Imports Snippets ：java 代码片段

五、编辑器配置

1. 原生彩色括号

    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs":"active"

2. Beautify 插件配置

    "beautify.language": {
        "js": {
            "type": [
                "javascript",
                "json"
            ],
            "filename": [
                ".jshintrc",
                ".jsbeautify"
            ]
        },
        "css": [
            "css",
            "scss"
        ],
        "html": [
            "htm",
            "html",
            "vue"
        ]
    },

3. ident rainbow 插件，修改缩进标识样式

   
   
   image.png