实际生产项目中ESLINT的配置

安装 ESLint 和相关插件

为了方便配置，我们选择使用 airbnb 插件（airbnb号称最严格的规范，且包括ES6+的代码规范要求，可以满足我们大部分的开发需求），安装它需要先执行下面的命令查看其依赖

npm info "[email protected]" peerDependencies

执行命令得到结果 { eslint: '^4.19.1 || ^5.3.0', 'eslint-plugin-import': '^2.14.0' }，我们可以看到它依赖 eslint: '^4.19.1 || ^5.3.0' 和 eslint-plugin-import: '^2.14.0' 则在项目目录下执行命令

npm install --save-dev eslint-config-airbnb-base [email protected] [email protected]

配置 eslintrc.js 文件

.eslintrc.js 是配置文件，通过它我们可以控制 Eslint 的执行过程及结果，下面是我在实际项目中用过的eslintrc.js 代码，可根据项目需要自行配置

按 Ctrl+C 复制代码

IDE 配置

开发的时候使用 vscode 作为 IDE，所以只要安装 ESLint 插件即可

实际生产项目中ESLINT的配置

发现并没有任何ESlint提示，检查一下是否把ESLint设置成开启状态：

（1）下面是ESLint开启的设置：

build文件夹下webpack.base.conf.js

const createLintingRule = () => ({
    test: /\.(js|vue)$/,
    loader: 'eslint-loader',
    enforce: 'pre',
    include: [resolve('src'), resolve('test')],
    options: {
        formatter: require('eslint-friendly-formatter'),
        emitWarning: !config.dev.showEslintErrorsInOverlay
    }
})

config文件夹下index.js

 useEslint: true,
 showEslintErrorsInOverlay: false

开启后仍然没有任何报错，原来是没有全局安装ESLint的原因：

（2）下面是全局安装ESLint:

npm install eslint -g

完成之后重启项目，发现vsCode中已经有了报错提示：

实际生产项目中ESLINT的配置

但是IDE中错误格式代码上没有红色波浪线的提示，查找原因后发现是vsCode没有更新的缘故，更新vsCode报错，

原因是我把vsCode安装在F盘了，而安装更新时软件会到C:\Program Files\Microsoft VS Code这个默认的目录下去安装，所以会失败。只要把F盘下的Code.exe复制一份

到C:\Program Files\Microsoft VS Code里，就可以成功更新了（缺点是更新貌似安装到C盘路径下了），更新后IDE中代码里就有红波浪线错误提示了：

实际生产项目中ESLINT的配置

发现代码中有喝多波浪线错误提示，因为设置了"eslint.autoFixOnSave": true,所以保存的时候ESLint会自动修改成设置的样式，单纯的格式报错保存后就没有波浪线报错了。

实际生产项目中ESLINT的配置

相关推荐