Vue项目关于eslint

全栈程序员-站长 • 2022年6月18日上午6:36 • 未分类 • 阅读 28

大家好，又见面了，我是你们的朋友全栈君。

新公司的Vue项目没有配置eslint，虽然平时coding的时候都会按照eslint的标准去写，但是没有统一的配置后期项目代码review的时候总还是不太方便。

Vue的项目配置eslint还是很简单的。它属于依赖插件中的一种，可以像安装其他插件一样在命令行用npm install eslint -g安装，也可以修改package.json文件去更新项目的依赖包，重新跑一遍npm install就可以了。

eslint常用的依赖有很多，我贴出我用的一些。在package.jsonde 的dependencies或者devDependencies中添加下列属性即可：

"babel-eslint": "^7.1.1",
"eslint-config-standard": "^6.2.1",
"eslint-friendly-formatter": "^2.0.7",
"eslint-loader": "^1.6.1",
"eslint-plugin-html": "^2.0.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^2.0.1",

然后重跑一遍npm install。不用担心，因为只添加了这几个依赖，速度会比较快，不会耽误太多开发的时间。

安装完依赖包之后不会生成 eslintrc.js这个配置文件，需要别的项目拷或者自己查阅官网配置。。。。我是菜鸡…拷的。

可以原封不动拷进去！

// http://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  },
  env: {
    browser: true,
  },
  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  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
  }
}

新建js文件并命名为.eslintrc.js然后把上面的代码复制粘贴进去。

项目中配置好eslint后，还需要到编辑器的设置里边去打开eslint的开关。这里以webstorm为例。

Vue项目关于eslint