vscode软件的安装与配置

Lewin.Lin

已于 2024-11-07 18:19:31 修改

阅读量885

点赞数 1

分类专栏：框架/库等工具的安装使用文章标签： visual studio code

于 2021-11-27 11:52:39 首次发布

本文链接：https://blog.csdn.net/weixin_45689946/article/details/121574836

版权

框架/库等工具的安装使用专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文列举了Visual Studio Code(VSCode)中提升开发效率的关键插件，包括自动补全、格式化、代码高亮、前端调试、路径补全等功能。如AutoCloseTag、Prettier、Vetur、Debugger for Chrome等，并提供了详细的设置教程和配置示例，旨在帮助开发者创建统一的代码规范，提升开发体验。

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

一、首先在vscode官网下载vscode软件
vscode官网下载
在这里插入图片描述

傻瓜式安装后，点击完成
在这里插入图片描述

二、插件推荐：

1、Auto Close Tag （自动补全 html 标签）
2、Auto Rename Tag （重命名一个HTML标签时，自动重命名配对的HTML标签）
3.1、Beautify （代码格式化插件，但是需要在vscode中配置，感觉一般）
文件 > 首选项 > 设置 >插件 >Beautify config > settings.json
/// settings.json

“editor.formatOnSave”: true, // 保存后自动格式化，不想保存时自动格式化的，则为false

  "beautify.language": {
    "js": {
      "type": [
        "javascript",
        "json"
      ],
      "filename": [  // 可以在项目中单独添加配置文件
        ".jshintrc",
        ".jsbeautify"
      ]
    },
    "html": [
      "html",
      "vue" 
    ]
  }

将这段配置黏贴进去并保存

3.2、Prettier - Code formatter （格式化工具, 统一代码规范, 团队开发必备）

4、Bracket Pair Colorizer 2 （为各种括号 {[()]} ，添加颜色区分，实用）
5、Chinese (Simplified) Language Pack for （vscode中文包）
6、Debugger for Chrome （前端调试，需要在vscode中配置）参考文件（https://www.cnblogs.com/lulu-beibei/p/10881675.html）
8、HTML CSS Support （html 代码自动补全以及 class 智能提示）
9、HTML Snippets （HTML 代码格式检测）
10、IntelliSense for CSS class names in HTML （把项目中 css 文件里的名称智能提示在 html 中）
11、JavaScript (ES6) code snippets （es6代码的智能提示）
12、jQuery Code Snippets
13、npm Intellisense （require 时的包提示）
14、open in browser （在html文件中，鼠标右键后可以在Chrome浏览器中打开）
15、Path Intellisense （路径自动补全）
16、React-Native/React/Redux snippets for es6/es7 （react代码只能提示工具）
17、Vetur （Vue 语法高亮显示, 语法错误检查, 代码自动补全与智能提示(配合 ESLint 插件效果更佳)）
文件 > 首选项 > 设置 >插件 >Beautify config > settings.json

{
    "editor.fontSize": 14,
    "editor.lineHeight": 16,
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "files.hotExit": "onExit",
    "editor.formatOnPaste": true,
    "editor.multiCursorModifier": "ctrlCmd",
    "editor.snippetSuggestions": "top",
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
    "explorer.confirmDelete": false,
    "vetur.completion.scaffoldSnippetSources": {


    },
    "vetur.format.defaultFormatter.html": "js-beautify-html", // html 不换行
    "vetur.format.defaultFormatter.js": "vscode-typescript", // js 不换行
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_line_length": 0, // 设置多个字符后换行 0 表示忽略
            "wrap_attributes": "auto", // html 标签属性 换行设置[auto|force|force-aligned|force-expand-multiline] ["auto"]
            "end_with_newline": false // 在文件结尾添加新行
        },
        "prettyhtml": {
            "singleQuote": false,  // 是否将所有双引号改为单引号
            "wrapAttributes": false,
            "sortAttributes": false
        }
    },
}

18、vscode-icons （vscode的文件夹有一个区分文件类型的小图标，有用）
19、VueHelper （跳转方法、组件、属性等定义）点击F12提示“找到xxx的任何定义”，快速定位到自定义方法，快速定位到自定义组件，快速定位到属性（property）
20、One Dark Pro 设置vscode的主题色，这个主题色我比较喜欢。install后，文件 > 首选项 > 主题颜色，再选中One Dark Pro。
21、Bootstrap 4, Font awesome 4, Font Awesome 5 Free （Bootstrap与font awesome的只能提示）
22、GitLens — Git supercharged （可以在vscode中看见当前行代码是哪个git成员修改过的）
23、HTML Boilerplate (在html文件中，输入html后，可以快速生成基础模板)
24、Increment Selection （在按住shift+alt+鼠标左键选中多行代码后，再输入ctrl+alt+i，就可以快速生成0~9的序列号，方便快速生成序列）
25、node-snippets (node的智能提示插件)
26、stylus (在Visual Studio code中为Stylus文件添加语法高亮显示和代码补全功能)
27、uniapp-snippet (为uniapp提供智能提示)
28、vscode wxml (微信开发提供智能提示)
29、vscode-elm-jump (代码中的某些变量，可以通过ctrl+鼠标左键，跳转到变量定义的地方)
30、Vue VSCode Snippets （vue的语法提示插件，支持vue2与vue3）

我自己的setting.json文件的配置

{
    "git.ignoreMissingGitWarning": true,
    "breadcrumbs.enabled": true,
    "editor.tabSize": 2,
    "workbench.iconTheme": "vscode-icons",
    "workbench.colorTheme": "One Dark Pro",
    "emmet.includeLanguages": {
        "javascript": "javascriptreact",
        "wxml": "html"
    },
    "files.associations": {
        "*.vue": "vue",
        "*.cjson": "jsonc",
        "*.wxss": "css",
        "*.wxs": "javascript"
    },
    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html"
    },
    // 文件保存自动格式化
    "editor.formatOnSave": false,
    // 格式化插件设置为 prettier
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[less]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "prettier.printWidth": 580,  // 设置每行的长度
    "prettier.tabWidth": 2, // 指定缩进的空格数
    "disableLanguages": [], // 不格式化文件，不格式化的文件单独设置。例如："vue"

    // 格式化js时候{}中内容不自动换行
    "beautify.config": {
        "brace_style": "collapse,preserve-inline"
    },
    "beautify.language": {
        "js": {
            "type": [
                "javascript",
                "json"
            ],
            "filename": [
                ".jshintrc",
                ".jsbeautifyrc"
            ]
            // "ext": ["js", "json"]
            // ^^ to set extensions to be beautified using the javascript beautifier
        },
        "css": [
            "css",
            "scss"
        ],
        "html": [
            "htm",
            "html"
        ]
        // ^^ providing just an array sets the VS Code file type
    },
    "minapp-vscode.disableAutoConfig": true,
    "files.associations": {
        "*.vue": "vue"
    },
    "editor.mouseWheelZoom": true,
    "css.enabledLanguages": [
        "html"
    ],
    "security.workspace.trust.untrustedFiles": "open",
    "minapp-vscode.formatMaxLineCharacters": 2000,
    "vetur.completion.scaffoldSnippetSources": {
        "workspace": "💼",
        "user": "🗒️",
        "vetur": "✌"
    },
    "vetur.format.defaultFormatterOptions": {  // 设置vetur插件在格式化代码时，使用不同选项时的格式化配置
        "js-beautify-html": {
            "wrap_line_length": 950,
            "wrap_attributes": "auto",
            "end_with_newline": false
        },
        "prettier": {
            "printWidth": 580, // 指定行的最大长度
            "tabWidth": 2, // 指定缩进的空格数
            "bracketSpacing": true,  // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
            
        },
        "overrides": [ // 针对特定文件或文件类型的格式化配置
            // { "files": "*.json", "options": { "tabWidth": 4 } },
            // { "files": "*.md", "options": { "printWidth": 100 } }
        ]
    },
    // #让vue中的js按编辑器自带的ts格式进行格式化 
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "html.format.wrapLineLength": 520,
    "editor.fontSize": 13,
    "auto-rename-tag.activationOnLanguage": [
        
        "*"
    ]
}

***VS Code 必备插件推荐***（[https://blog.csdn.net/shenxianhui1995/article/details/81604818](https://blog.csdn.net/shenxianhui1995/article/details/81604818)）