sublime text3 配置eslint

sublime text3 配置eslint

1.环境说明

node @>6.14
全局安装 npm i eslint

2.下载插件

• sublimelinter
• sublimelinter-eslint

3.配置插件

Preferences -> Package Setting -> SublimeLinter -> setting 打开后在user里做如下配置

// SublimeLinter Settings - User
{
	"debug": true,
    "delay": 0.1,
    "lint_mode": "manual",
    // "syntax_map": {
    //     "html (django)": "html",
    //     "html (rails)": "html",
    //     "html 5": "html",
    //     "css": "css",
    //     "javascript (babel)": "javascript",
    //     "magicpython": "python",
    //     "php": "html",
    //     "python django": "python",
    //     "pythonimproved": "python"
    // },
    "styles": [
        {
            "scope": "region.yellowish markup.warning.sublime_linter",
            "types": ["warning"]
        },
        {
            "scope": "region.redish markup.error.sublime_linter",
            "types": ["error"]
        },
        {
            "priority": 1,
            "icon": "dot",
            "mark_style": "outline"
        }
    ],
    "linters": {
        "eslint": {
            // 让eslint能够识别html页面中嵌入的JS
            "selector": "source.js | text.html.basic"
        },
        // 下面三个sublimelinter默认都支持，为防止检查干扰，需要禁用它们
        "csslint": {
            //"disable": true
        },
        "stylelint":{
            //"disable":true
        },
        "htmlhint": {
            //"disable": true
        }
    }
}

4.使用插件

在自己的工程内执行
eslint --init,选择对应配置（会问你一堆问题，做选择就行）
这是列出的测试配置

module.exports = {
    //此项是用来指定eslint解析器的，解析器必须符合规则，babel-eslint解析器是对babel解析器的包装使其与ESLint解析
    "parser": 'babel-eslint',
    //此项是用来指定javaScript语言类型和风格，sourceType用来指定js导入的方式，默认是script，此处设置为module，指某块导入方式
    "parserOptions": {
        "sourceType": 'module'
    },
    //此项指定环境的全局变量，下面的配置指定为浏览器环境
    "env": {
        "browser": true,
        "es6":true
    },
    // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
    // 此项是用来配置标准的js风格，就是说写代码的时候要规范的写，如果你使用vs-code我觉得应该可以避免出错
    "extends": 'standard',
    "rules": {
        //检测的规则
    }
}

打开一个js文件，右键选择 Lint this view
出现报错（模块没有安装）
执行

npm i babel-eslint eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard --save-dev

安装完之后再次执行刚才的操作，js文件会出现一堆红框框，鼠标移入会出现报错原因

5.自动提示

在步骤3里的 lint_mode 修改为 background

6.自动修复

安装插件 ESLint-Formatter ,右键选择 ESLint Formatter -> Format This File

7.Vue 使用自动修复

命令：eslint --fix filename 此处如果没有全局安装步骤4所有依赖会报错，因此在sublime 新增编译系统

打开 Tools -> Build System -> New Build System
内容如下

{
	"shell_cmd": ".\\node_modules\\.bin\\eslint --fix $file"
}

再 npm 安装 eslint-plugin-html

npm install eslint-plugin-html --save-dev

修改.eslintrc.js 添加以下内容

"plugins": [
    "html"
]

此时执行 ctrl+b 即可修复

8.报错解决

此时修复vue文件可能会出现

Adjacent JSX elements must be wrapped in an enclosing tag

的报错

解决方案：参考elint-plugin-vue

• npm 下载 eslint-plugin-vue

npm install --save-dev eslint-plugin-vue

• 修改.eslintrc.js

module.exports = {
-	"parser": 'babel-eslint',	
	"parserOptions": {
+       "parser": "babel-eslint",
        "sourceType": "module",
    },
}

重新执行 ctrl+b 大功告成