vscode基本使用总结

weixin_46276411

已于 2023-03-22 09:59:18 修改

阅读量329

点赞数

文章标签： html5

于 2021-08-10 11:05:31 首次发布

本文链接：https://blog.csdn.net/weixin_46276411/article/details/119565259

版权

本文总结了VSCode的基本使用，包括安装插件、解决中文设置问题、配置自动保存格式化等步骤，帮助用户更好地掌握这款代码编辑器。

摘要由CSDN通过智能技术生成

第一步：安装全部插件

Beautify
Bracket Pair Colorizer
Chinese (Simplified) Language Pack for Visual Studio Code
Eslint
Guides
Live Server
Vetur
vscode-icons

第二步：解决设置中文不成功问题

1.安装这个插件

Chinese (Simplified) Language Pack for Visual Studio Code

2.c+shift+p选择zh-en
在这里插入图片描述

第三步：设置保存自动格式化

首选项-设置-右上角setting.json,全部替换为以下代码

// {
//     "workbench.startupEditor": "none",
//     "workbench.colorTheme": "Monokai Dimmed",
//     "vetur.format.defaultFormatter.js": "vscode-typescript",
//     "javascript.format.insertSpaceAfterConstructor": true,
//     "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
//     "eslint.codeAction.showDocumentation": {
//         "enable": true
//     },
//     "[javascript]": {
//         "editor.defaultFormatter": "HookyQR.beautify"
//     },
//     "files.autoSave": "afterDelay",
//     "thiefBook.filePath": "D:\\WeChat\\test\\我的师兄实在是太稳健了.txt",
//     "thiefBook.isEnglish": true,
//     "editor.renderIndentGuides": false,
//     "read-book-status-bar.name": "我的师兄实在是太稳健了.txt",
//     "read-book-status-bar.link": "/D:/WeChat/test/我的师兄实在是太稳健了.txt",
//     "security.workspace.trust.untrustedFiles": "open",
//     "emmet.variables": {
//     }
// }
{
    "workbench.iconTheme": "vscode-icons",
    "explorer.confirmDragAndDrop": false,
    "explorer.confirmDelete": false, //  启用保存时自动修复,默认只支持.js文件
    "eslint.validate": [
        "javascript", //  用eslint的规则检测js文件
        {
            "language": "vue", // 检测vue文件
            "autoFix": true //  为vue文件开启保存自动修复的功能
        },
        {
            "language": "html",
            "autoFix": true
        },
    ],
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "files.autoSave": "afterDelay",
    "editor.tabSize": 2,
    "security.workspace.trust.untrustedFiles": "open",
    "emmet.excludeLanguages": [
        "markdown"
    ],
    "workbench.colorCustomizations": {
        "statusBar.background": "#273140",
        "statusBar.noFolderBackground": "#1e1e1e",
        "statusBar.debuggingBackground": "#1e1e1e"
    },
    "auto-rename-tag.activationOnLanguage": [
        "*"
    ],
    "eslint.nodeEnv": "",
    "eslint.autoFixOnSave": true,
}