VSCode 配置 ESLint + Airbnb + Vue

Author Avatar
Roojay 9月 07, 2018
  • 在其它设备中阅读本文章

2018-09-08 更新,调整为 eslint-config-airbnb-base 正确配置。

基本环境

Win 10 v1709
Nodejs v8.11.3
VScode v1.26.1

VSCode 安装 ESLint 扩展

打开 VSCode 搜索 ESLint 扩展安装

NPM 安装 ESLint

  1. 全局安装(推荐):

    npm install eslint -g

  2. 项目根目录本地安装:

    npm install eslint --save-dev

1. 自定义配置规则

  1. 全局配置
    在当前用户根目录下执行 eslint --init,根据个人爱好选择生成配置文件 .eslintrc.json
    例如:windows\user\username

  2. 项目根目录配置:
    在当前用户根目录下执行 eslint --init,根据个人爱好选择生成配置文件

ps:具体配置参考:http://eslint.cn/docs/user-guide/configuring

2. 使用 eslint-config-airbnb-base 标准规则

  1. 查看 Airbnb 标准依赖插件版本:

    npm info "[email protected]" peerDependencies

例如:本次的 plugins 的版本要求:

{  
  eslint: '^4.19.1 || ^5.3.0',
  eslint-plugin-import': '^2.14.0' 
}
  1. 安装对应版本的插件:

    npm install eslint-config-airbnb-base [email protected]^#.#.# [email protected]^#.#.# -g

  2. 安装 babel-eslint 插件:
    npm i -g babel-eslint

  3. 更改配置文件 .eslintrc.json 如下:

{
    // 要启用的环境
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    // 启用 airbnb 规则
    "extends": "airbnb-base",
    // 使用语言及版本
    "parserOptions": {
        "parser": "babel-eslint",
        "ecmaVersion": 2017,
        "sourceType": "module"
    },
    // 个人自定义规则
    "rules": {
        "no-console":"off",
        "no-plusplus":"off"
    }
}

ESLint 支持 Html 以及 Vue 单文件组件

  1. 安装 eslint-plugin-html 和 eslint-plugin-vue 插件

npm i -g eslint-plugin-html eslint-plugin-vue

  1. 在 VSCode 设置设置中添加如下配置:
      // ESLint 配置
     "eslint.enable": true,
     // 保存时是否自动修复
     "eslint.autoFixOnSave": false,
     // nodejs 路径, windows 路径使用双 \\ 进行转义
     "eslint.nodePath": "C:\\Dev\\nodejs",
     "eslint.options": {
         // 配置文件的地址
         "configFile": "C:\\Users\\roojay\\.eslintrc.json",
     },
     "eslint.validate": [
         "javascript",
         "javascriptreact",
         // 启用 html 和 vue 中 ESLint 验证和自动修复
         {
             "language": "html",
             "autoFix": true
         },
         {
             "language": "vue",
             "autoFix": true
         }

The MIT License (MIT)
Copyright (c) 2019, Roojay.

本文链接:https://roojay.com/pages/3bcc390e/