VS Code 扩展(插件)推荐

Teroun

2022-3-21

VS Code

通用

1. Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code（中文(简体)语言包扩展）
2. open in browser（这允许您在默认浏览器或应用程序中打开当前文件）
3. vscode-icons（文件图标主题美化图标）
4. Path Intellisense（自动完成文件名、文件路径）
5. Indent-Rainbow（使得对齐更加具有可读性）
  我的设置参数
```
// 对齐更加具有可读性-主题
"indentRainbow.indicatorStyle": "light",
```
6. Trailing Spaces（高亮冗余空格，快速删掉）
7. Better Comments（代码注释高亮）
8. TODO Highlight（TODO标签高亮）
9. Better Align（，=，：等对齐，代码风格规范）
10. background（自定义背景卸载务必查看说明）
  我的设置参数
```
"background.useDefault": false,
"background.loop": true,
"background.style": {
        "content": "''",
        "pointer-events": "none",
        "position": "absolute",
        "z-index": "99999",
        "width": "100%",
        "height": "100%",
        "background-position": "0% 0%",
        "background-size": "cover",
        "background-repeat": "no-repeat",
        "opacity": 0.1
},
"background.customImages": [
        "file:///C:/img.jpg"
]
```
11. Live Server（浏览器实时刷新）
12. Codelf（变量命名神器）
13. SFTP（ftp自动同步文件）
14. nginx-formatter（nginx配置文件依赖：NGINX Configuration Language Support）
15. Vue Language Features (Volar)（Vue）

PHP

PHP Intelephense（智能感知功能）
PHP DocBlocker（注释自动生成）
PHP Namespace Resolver（命名空间解析器）
PHP Debug（调试工具需PHP安装 Xdebug 扩展）

HTML

Auto Close Tag（自动闭合HTML的括号）
Auto Rename Tag（自动同步重命名的另一个标签）
IntelliSense for CSS class names in HTML（根据工作空间中找到的定义完成HTML类属性的CSS类名）

Highlight Matching Tag（高亮匹配的标签）

我的设置参数

"highlight-matching-tag.styles": {
        "opening": {
            "left": {
                "underline": "yellow"
            },
            "right": {
                "surround": "#155FFA"
            },
            "name": {
                "highlight": "rgba(180, 20, 80, 0.3)"
            }
        },
        "closing": {
            "full": {
                "custom": {
                    "dark": {
                        "borderWidth": "0 0 1px 0",
                        "borderColor": "white",
                        "borderStyle": "solid",
                        "borderRadius": "4px",
                        "right": "10px"
                    },
                    "light": {
                        "borderWidth": "0 0 1px 0",
                        "borderColor": "brown",
                        "borderStyle": "solid",
                        "borderRadius": "4px",
                        "right": "10px"
                    }
                }
            }
        }
    }