在vue中使用eslint,配合vscode的操作

不管是多人合作还是个人项目，代码规范是很重要的。这样做不仅可以很大程度地避免基本语法错误，也保证了代码的可读性。这所谓工欲善其事，必先利其器，个人推荐 eslint+vscode 来写 vue，绝对有种飞一般的感觉。

每次保存，vscode就能标红不符合eslint规则的地方，同时还会做一些简单的自我修正。安装步骤如下：

首先安装eslint插件

安装并配置完成 ESLint 后，我们继续回到 VSCode 进行扩展设置，依次点击文件 > 首选项 > 设置打开 VSCode 配置文件,添加如下配置

"files.autoSave":"off",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    { "language": "vue", "autoFix": true }
   ],
   "eslint.options": {
    "plugins": ["html"]
   }

这样每次保存的时候就可以根据根目录下.eslintrc.js你配置的eslint规则来检查和做一些简单的fix。

补充知识：vscode配置eslint搭配vue脚手架快速实现代码质量化书写

我们在公司使用脚手架的时候可能会使用eslint来实现代码的质量检测,但是真正在书写代码的时候要时刻记住那些 “标准”可能有点难受比如结尾不加分号使用单引号首行俩个空格缩进等等

这个时候我们可能想每次书写玩代码保存的时候它能自动帮我整理成符合标准的代码那是不是就事半功倍了

没错vscode就有这样的功能

还是和和往常一样直接上步骤和代码了

1.实现这样的条件 (vue脚手架安装的时候需要选中 eslint +prettier 这个选项)

在vscode上安装三个插件 eslint 代码质量检测插件 prettier 规则可以自定义 vetur vue代码高亮

在vue中使用eslint,配合vscode的操作

2.进入文件=>首选项=>设置=>用户=>扩展=>eslint>在seeting.json文件中编写加上去下面的代码

"editor.codeActionsOnSave": {     
    "source.fixAll.eslint": true
  }
// 默认用户保存的时候自动 实现eslint代码标准

3.有一个刚安装好的vue脚手架我的是 @vue/cli 4.0 版本了

在vue中使用eslint,配合vscode的操作

打开 .eslintrc.js文件在rules 里面加入下面的话是我们自定义的规则

rules: {
  "prettier/prettier": [
   "error",
   {
    semi: false,  // 结尾分号 false是关闭 true是打开
    singleQuote: true,  // 单引号 true是打开 false是关闭
    printWidth: 160   // 默认代码多少个换行  我这里设置160
   }
  ]
 }

4.运行测试在我们的怕package.json 文件中的

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint"  // 这句话是启动我们的 eslintrc.js 配置文件的命令 默认这句话是有的
 }

我们启动一下 npm run lint 运行成功后

在vue中使用eslint,配合vscode的操作

看了一下我们脚手架的入口文件 main.js 是不是所有的引号都变成了单引号结尾还没有分号

我们随便修改一下代码保存他也会自动帮我们调整成符合eslint标准格式的代码是不是很舒服大家快去试试把

以上这篇在vue中使用eslint,配合vscode的操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持服务器之家。

原文链接：https://blog.csdn.net/zjsfdx/article/details/89541790

秒客网

在vue中使用eslint,配合vscode的操作

相关文章