🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## 一、预备环境 确保安装nodejs;[nodejs安装](../../../%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/Node.js/%E5%AE%89%E8%A3%85.md) 确保安装vue-cli;[vueCli安装](../../../%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/vueCli/%E5%AE%89%E8%A3%85.md) 确保安装webpack;[webpack安装](../../../%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E6%9E%84%E5%BB%BA%E5%B7%A5%E5%85%B7/webpack/%E5%AE%89%E8%A3%85%E9%85%8D%E7%BD%AE.md) 确保安装ESLint;[ESLint安装](../../../%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%BC%80%E5%8F%91%E6%B5%8B%E8%AF%95/ESLint.md) 确保安装git:[安装git](../../git.md) ## 二、安装 下载:VSCode-win32-x64-1.52.1.zip 解压到目录: ![](https://img.kancloud.cn/e4/a3/e4a3485b19a921385a41883f208b8c45_729x516.png) 创建一个workspace目录: ![](https://img.kancloud.cn/75/a6/75a62756aae95b8c2e25f308e5995b44_683x252.png) 打开:Code.exe ![](https://img.kancloud.cn/50/3e/503e282f3f3d25244f475784120858b9_1366x736.png) ## 三、插件安装 1、安装vue插件vetur,实现支持vue文件的代码高亮 ctrl+Shift+X 在商店中查找 vetur; ![](https://img.kancloud.cn/1a/53/1a5322cbb350f1a4f746696fd0d3912b_1366x736.png) 设置: ![](https://img.kancloud.cn/af/50/af507f8ca6b21dd3fc53e32a46628f9a_1366x736.png) ![](https://img.kancloud.cn/45/c1/45c1981421419216476b43f6d60c79e3_1366x736.png) ``` "emmet.syntaxProfiles": { "vue-html": "html", "vue": "html" }, "vetur.validation.template": true, ``` 效果: ![](https://img.kancloud.cn/dc/df/dcdf11fc1aec1af17a24b9de586e31b2_1366x736.png) 2、安装ESLint 插件 ![](https://img.kancloud.cn/a7/1f/a71f213d5e587175e6af410ada42c9d9_1366x736.png) 设置,在上面配置vetur下面增加配置项: ![](https://img.kancloud.cn/0d/5d/0d5dd35dea726deff4d0665cdc558997_1366x736.png) ``` "eslint.validate": [ "javascript", "javascriptreact", "html", "vue" ], "eslint.options": { "plugins": [ "html" ] }, ``` 效果: 你完成了如上所有的配置以后,当你`command+s(ctrl+s)`点击保存的时候,eslint就会帮你自动格式化以符合eslint的主配置文件`.eslintrc.js`文件中的规则; 未启用ESLint前: ![](https://img.kancloud.cn/be/ed/beed16326722366e610cfee9fb66e554_1366x736.png) 启用ESLint后: ![](https://img.kancloud.cn/2e/77/2e774d7fea02992ceb9745908887b58d_1366x736.png)