VSCode

仉梓
2023-12-01

5月9日 · 306 人阅读

visual studio code 配置vue开发环境

废话

重装了用了3年的操作系统,配置前端开发环境时一些开发工具配置丢失了,这里做下记录,我精简了一遍插件,确保都用得上,且功能不重叠。

正文

本文针对的开发工具是vscode, 配合vue-cli创建的项目,告诉你安装什么插件,每个插件的作用,每行配置代码的作用

一、插件

网上搜索vscode插件的文章,动辄十几个,其实根本用不了那么多,很多插件的作用还有重叠,电脑性能还被白白浪费。这里精简为主,每一个插件都发挥它最大的作用,并尽量说明它们的作用

Vetur

用vue开发的必装,官方推荐,别纠结用哪个,就它了。
作用:高亮.vue文件,附带有格式化功能,配合Eslint插件对代码进行格式化检查

Eslint

如果你想你(团队)的代码风格所有地方看起来都像是同一个人写的,就靠它咯
作用:检查你的js、html、css代码,确保它们符合规范,并且代码风格保持一致性,强制性的规则,你少写一个空格或者多敲一个回车都会被严格的指出来,强迫症的福音,第一次用它的同学可能会抓狂,熟悉后你会感谢它
使用:想让插件生效,你的项目还得做一番复杂的配置,好在vue-cli生成的项目帮我们把配置都生成好了,你也不必修改什么规则,直接用就行,在使用vue-cli生成webpack项目时会询问你是否启用eslint并且使用哪套规范,选择Standard规范就行:

[图片上传失败...(image-54630e-1528709488786)]
它会自动在你的项目根目录下生成.eslintignore.eslintrc.js两个配置文件,package.json文件里增加下面的依赖:

    "eslint": "^4.15.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^4.0.0",

ps:对于我这种从前写Java的人来说,刚开始也是无法接受这种tab键2个空格、不加分号的Standard风格,不过一周以后再看原先的Java代码反倒不习惯了

二、配置

其实装好上面几个插件你已经可以满足最基本的开发需求了,但现在还没有加任何配置,我们来配置下满足些额外的需求

1.代码错误实时提示

少写了一个空格,或者多写了一个分号,都能马上以醒目的波浪线提示出来,鼠标悬浮上去还有错误提示,双击波浪线的代码还会出现一个小灯泡,点击灯泡可以自动帮你修正代码格式:

[图片上传失败...(image-6048ce-1528709488785)]

我们可以找到编辑器左上角,依次打开 文件首选项设置,将i面配置加入到右边的用户设置中:

"eslint.validate": [
    "javascript",
    "javascriptreact",
     {
         "language": "vue",
         "autoFix": true
     }
],

2.ctrl+s保存时自动修正格式错误的js代码

在配置里加入下面的json:

"eslint.autoFixOnSave": true,

3.格式化写的代码

在vue文件里,按下鼠标右键,在菜单里你会发现有个格式化文件按钮,我们点击它,你会发现,本来图A好好的代码格式化后变成了图B,由于不符合standard的规范,就报错了:
图A:
[图片上传失败...(image-9440d7-1528709488784)]

图B:
[图片上传失败...(image-9afa99-1528709488784)]

格式化后多帮我们加了分号,还把单引号变成了双引号
这是由于vetur插件默认格式化vue文件里面的js代码使用的prettier,和我们的standard规范有冲突,你可以点击这里查看vetur插件格式化的默认配置

既然知道了原因,我们可以覆盖它的默认配置:

"vetur.format.defaultFormatter.js": "vscode-typescript",

再试一次格式化,发现问题解决了,不过还是报错:

[图片上传失败...(image-5562e8-1528709488784)]
鼠标悬浮上去提示告诉我们,定义函数时,函数名要与后面的括号有一个空格,所以我们继续加配置解决问题:

"javascript.format.insertSpaceBeforeFunctionParenthesis": true,

这次格式化vue文件终于没有报错啦

别急哈,问题还没完:

请你仔细的观察下整个vue文件格式化后的样子,有没有发现html模板代码没有被格式化?

因为vetur插件的默认格式化配置里,是没有为html模板格式的,需要我们手动指定配置:

"vetur.format.defaultFormatter.html": "prettier",

4.保存时自动格式化

每次写完代码自己右键菜单格式化似乎有点麻烦,所以我们可以让它更智能用电,ctrl+s一保存就立马自动格式化:

"editor.formatOnSave": true,

其他与插件无关的配置

在vue文件,默认按tab会有4个空格的缩进,我们需要的是2个:

"editor.tabSize": 2,

小结

好啦,能满足你基本写代码需求的插件和配置我讲完了,不多,配合vue-cli项目真的很省事,2个插件,几行配置就搞定了,更重要的是,你能知道每个插件、每行配置都干了什么事情,解决了什么问题,而不是装了一堆不知道作用的插件,配置了一堆自己也看不懂的配置。
这里汇总下上面的配置:

    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    "eslint.autoFixOnSave": true,
    "vetur.format.defaultFormatter.html": "prettier",
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "editor.formatOnSave": true,
    "editor.tabSize": 2,

其他插件

vscode-icons 美化左边资源管理器里项目文件的图标,每一种文件后缀都对应一个图标,很直观明了
vscode-background 设置代码的背景(找张喜欢的小姐姐作为背景),腐宅必备
Path Autocomplete 代码引用其他资源(比如图片)写相对路径时,会有提示

 类似资料: