关于vue的eslint相关知识

eslint的应用已经深入到每个前端项目，最成熟的规范是airbnb/javascript。

vscode配置

vscode需要安装eslint的插件，在设置->首选项->设置，setting.json可以配置eslint.validate，因为eslint的插件默认只配置js和react的校验，vue文件类型需要额外配置。

{
  "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        },
    ],
}

配置后，按下快捷键command + P，敲fix，提示Fix all autofixable Problem实现部分不规范的代码的修复。

换行

airbnb的js规范要求每行在100字符内，代码很容易超出字符长度限制。html或模版需要针对自定义属性灵活的换行，大大增加可读性。

改成：

语意化命名

组件名应该要和函数名一样需要呈现出易懂的语义化规则。

去除eslint校验

如果某个文件需要跳过eslint规则限制

/* eslint-disable */

框架层面的修复

cli2和cli3都可以实现eslint的提示以及自动修复。命令都是：

npm run lint

实际是执行eslint模块的命令，针对指定目录和指定拓展名，--fix启动自动修复。

eslint --ext .js,.vue src --fix

git提交信息规范化

feat：新增功能；
fix：修复bug；
docs：修改文档；
refactor：代码重构，未新增任何功能和修复任何bug；
build：改变构建流程，新增依赖库、工具等（例如webpack修改）；
style：仅仅修改了空格、缩进等，不改变代码逻辑；
perf：改善性能和体现的修改；
chore：非src和test的修改；
test：测试用例的修改；
ci：自动化流程配置修改；
revert：回滚到上一个版本；

Last but not the least

关注这个专题大前端从入门到跑路，欢迎你们投稿。