Visual Studio Code + eslint + Standard 具体配置分享

eslint

VScode自动修复功能

  1. 在vscode添加 eslint 插件
  2. 在vscode添加 vetur 插件
  3. 按照下面的配置在自己的用户设置里面配置
"eslint.autoFixOnSave": true,
"eslint.validate": [
    "javascript",{
        "language": "vue",
        "autoFix": true
    },"html",
    "vue"
]

到了这一步就可以尝鲜了,当然了,代码规范只是基础,个人认为成熟的技术团队是要统一代码风格的,vscode提供了很好的插件方便我们管理(以前都自己手改,相当累人啊)

StandardJS - JavaScript Standard Style

eslint忽略文件设置

在脚手架中我们以ESlint语法规则,standard.js风格的代码风格来约束我们的代码,但是有时候为了调试方面,我们需要使用一些调试命令

忽略下一行内容

// eslint-disable-next-line 

忽略整个文件

/* eslint-disable */ 

统一代码风格standard

当然,在我们熟悉了eslint规范我们的代码之后,只是考基本的eslint无法统一团队的代码风格,这时候,就需要对项目加入一些辅助的依赖来规范我们的代码

这是我项目中关于语法校验证 的一些规则依赖

"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended",
      "@vue/standard"
    ],
    "rules": {
      "no-console": 0
    },
    "parserOptions": {
      "parser": "babel-eslint"
    }
  }

参考文件

vue新建项目的package.json

{
  "name": "mycon-manage",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "flyio": "^0.6.7",
    "vue": "^2.5.17",
    "vue-router": "^3.0.2",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.2.0",
    "@vue/cli-plugin-eslint": "^3.2.1",
    "@vue/cli-service": "^3.2.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0-0",
    "vue-template-compiler": "^2.5.17"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended",
      "@vue/standard"
    ],
    "rules": {
      "no-console": 0
    },
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}