eslint的妙用和快捷修复
in 前端 with 0 comment

eslint的妙用和快捷修复

in 前端 with 0 comment

eslint是一款可自定义的JavaScript和JSX检查工具,通过在项目中引入eslint同时配置.eslintrc.js或.eslintConfig文件来实现对代码规范的约束。

之前一直用着默认的代码规范,直到2个不同项目的eslint配置搞得我头昏脑胀,决定今天把它办了。

首先eslint的官网是: https://eslint.org/(英文的),看不懂没关系,有中文的https://eslint.bootcss.com/docs/rules/

大致就是这样的结构

module.exports = {
    root: true,
    env: {
        node: true
    },
    'extends': [
        'plugin:vue/essential', // 一个拓展,不去看也无伤大雅
        '@vue/standard' // 一个默认的标准集,你可以在rules中覆盖这个标准的一些规则
    ],
    rules: {
        // 这里就是我们覆盖规则的地方
        ...
    },
    parserOptions: {
        parser: 'babel-eslint' // 编译相关的配置,无伤大雅
    }
}

规则和值都能从上述网站中找到,不细说了。

现在来说在webstorm中,如何使用快捷键根据eslint规则修改代码。

之前我以为格式化代码不就是CTRL+SHIFT+L么,为啥还要单拎出来说?其实CTRL+SHIFT+L只是格式化代码,eslint的快捷键默认是未设置的,我们需要手动在设置中设置他。

操作步骤:

1.png

2.png

之后在代码报错的地方,只要输入CTRL+ALT+1,就能按eslint设置的规则格式化代码了。

舒服了。

Comments are closed.