package.json配置eslint，让你的vue项目更加规范

桃扇骨 2022-12-10 14:39 898阅读 0赞

导语：  
你的vue项目代码是否规范，或者这么说吧，你看别人的代码的时候，会不会想打他。是不是他没有用上eslint，他的代码格式不规范。这时候你就要疯狂安利他在项目中使用eslint。

# 1，安装 #

npm i eslint – save-dev

# 2，配置启动项 #

在package.json配置一下。

"scripts": { 
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev",
        "build": "node build/build.js",
        "lint": "eslint --ext .js,.vue src"
      },

# 3，创建一个文件 eslintrc.js #

module.exports = { 
      root: true,
      parser: 'babel-eslint',
      parserOptions: { 
        sourceType: 'module'
      },
      env: { 
        browser: true,
      },
      
      extends: 'standard',
      // required to lint *.vue files
      plugins: [
        'html'
      ],
      // add your custom rules here
      'rules': { 
        // allow paren-less arrow functions
        'arrow-parens': 0,
        // allow async-await
        'generator-star-spacing': 0,
        // allow debugger during development
        'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
        'eol-last': 0,
        'space-before-function-paren': 0
      }
    }

# 4，可以设置一些忽略eslint检测的文件 #

创建.eslintignore文件，写入

build/*.js
    config/*.js

这里是忽略对这两个文件的检测。

这时候你在使用npm run dev的时候，可能就会跳出一大堆错误（新手更多），这时候使用npm run lint --fix，就可以自动修改一些错误。

**补充**：  
![在这里插入图片描述][20200902155530706.jpg_pic_center]  
微信搜索【web小馆】，回复**全栈博客项目**，即可获取**项目源码和后续的实战文章教程**。每天用最简单朴实的语言，潜移默化的提升你的计算机基础知识和前端技术。小米粥，一个专注的web全栈工程师，我们下期再见！

![在这里插入图片描述][20200825125805528.png_pic_center]  
![node后台][node]

[20200902155530706.jpg_pic_center]: /images/20221123/4758361bb00144ac867e2ff43972064b.png
[20200825125805528.png_pic_center]: /images/20221123/14f7baca06c14390ad6a8b3b08e1befd.png
[node]: /images/20221123/2155f2f5cccf4f75b80c29894a72ea6d.png