10.推荐vscode 前端常用插件

时间：2024-03-25 12:31:37 来源：网络cs 作者：峨乐栏目：卖家故事阅读：

标签：推荐

阅读本书更多章节>>>>

1.Live Server

Live Server 插件是一个用于前端开发的扩展，它的主要作用是提供一个本地开发服务器，以便实时预览和调试网页应用程序。其最大特点在于热重载，即开发者可实时预览代码效果。因为Live Server 允许开发者在浏览器中实时预览您正在编辑的网页。每当保存HTML、CSS、JavaScript文件时，该插件会自动刷新浏览器，以便开发者可以立即看到页面的更改效果

2.Auto Close Tag

该插件帮助我们输入标签的时候，自动结束标签。通常想要使用一个特定的 HTML 元素时，需要手动输入开始标签和结束标签。而当使用该插件后，只需要输入开始标签，它就会自动添加结束标签。此外，对于 Vue 开发者来说，它还支持自定义类型名称。当输入自定义组件的开始标签时，它会自动添加结束标签。

3.Auto Rename Tag

该插件帮助我们在重命名一个标签时，自动重命名 HTML 标签的开始和结束标签。避免只修改了开始标签，而忘记修改结束标签。该扩展适用于 HTML、XML、PHP 和 JavaScript。

4.Vue Language Features (Volar)

该插件可以让Vue代码获得漂亮的语法高亮显示、错误检查和代码格式化。并且它还会对很多 Vue 指令和事件处理程序，进行提示和建议。

5.ESLint

用于代码规范的检查，这个插件使得开发者可以在编写代码的过程中即时发现和修正错误，极大地提高了编程效率和代码质量

6.Prettier - Code formatter

这是一个代码格式化工具，它可以帮助开发者以统一的方式格式化，从而极大地提高了代码的可读性和可维护性,同时可以在vscode settings.json 下面配置格式化规范从而实现保存按照eslint以及代码规范自动格式化，以下是目前配置好的一个自动保存eslint格式化的settings.json

{  "editor.tabSize": 2,  "editor.guides.bracketPairs": "active",  "eslint.autoFixOnSave": true, // 每次保存的时候将代码按eslint格式进行修复  "prettier.eslintIntegration": true, //使用单引号替代双引号  "javascript.format.insertSpaceBeforeFunctionParenthesis": false, //让函数(名)和后面的括号之间加个空格  "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html  "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化  "vetur.format.defaultFormatterOptions": {    "wrap_attributes": "force-expand-multiline",    // 对属性进行换行 wrap_attributes    // - auto: 仅在超出行长度时才对属性进行换行。    // - force: 对除第一个属性外的其他每个属性进行换行。    // - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐。    // - force-expand-multiline: 对每个属性进行换行。    // - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐。    "js-beautify-html": {      "wrap_attributes": "force-expand-multiline",      "wrap_line_length": 120,      "semi": false,      "singleQuote": true,      "end_with_newline": false    }  },  "eslint.validate": [    //开启对.vue文件中错误的检查    "javascript",    "javascriptreact",    {      "language": "html",      "autoFix": true    },    {      "language": "vue",      "autoFix": true    }  ],  "search.exclude": {    "**/node_modules": true,    "**/bower_components": true,    "**/dist": true  },  "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",  "editor.codeActionsOnSave": {    "source.fixAll.eslint": "explicit"  },  "files.associations": {    "*.cjson": "jsonc",    "*.wxss": "css",    "*.wxs": "javascript"  },  "emmet.includeLanguages": {    "wxml": "html"  },  "minapp-vscode.disableAutoConfig": true,  "[vue]": {    "editor.defaultFormatter": "octref.vetur"  },  "prettier.jsxSingleQuote": true,  "prettier.singleQuote": true, // 使用单引号  "prettier.semi": false,  "[javascript]": {    "editor.defaultFormatter": "vscode.typescript-language-features"  },  "[html]": {    "editor.defaultFormatter": "vscode.html-language-features"  },  "cssrem.rootFontSize": 100,  "[typescript]": {    "editor.defaultFormatter": "esbenp.prettier-vscode"  },  "[json]": {    "editor.defaultFormatter": "esbenp.prettier-vscode"  },  "[jsonc]": {    "editor.defaultFormatter": "esbenp.prettier-vscode"  },  "workbench.startupEditor": "newUntitledFile",  "gitlens.hovers.currentLine.over": "line",  "security.workspace.trust.untrustedFiles": "open",  "git.confirmSync": false,  "[scss]": {    "editor.defaultFormatter": "vscode.css-language-features"  },  "git.suggestSmartCommit": false,  "workbench.editorAssociations": {    "*.dll": "default"  },  "editor.formatOnSave": true}