vscode软件的安装与配置

一、首先在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。

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

vscode软件的安装与配置

二、插件推荐：

猜你喜欢