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

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

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

没错vscode就有这样的功能

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

1.实现这样的条件 

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

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

"editor.codeActionsOnSave": {         

        "source.fixAll.eslint": true

    }

// 默认用户保存的时候自动 实现eslint代码标准

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

打开 .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   运行成功后

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

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

最后 还是 武汉加油 中国加油 祝愿疫情早点过去 武汉热干面加油