震惊!竟然可以ctrl+s自动格式化eslint?

416 阅读2分钟

Vue-CLI手动模块

自动挡

vue create 项目名 

default只包含了 Vue2 + babel +eslint

手动挡

1.vue create 项目名

2.选择 Manually select features 

3.进入选择向导,使用 空格 选中

choose Vue version

Babel

Router

Vuex

Css Pre-processors

Linter/Formatter

被选中的前面的括号会添加一个绿色的小星星

4.进入 Vue 版本

5.是否使用 history 模式的路由 默认选择项是 history ,但是建议不要用

6.使用 css 的预处理器,建议选择 less

7.选择 eslint 语法规则,建议选择 eslint + standard config 

8.选择额外的 Lint 功能,建议选择 Lint on save ,在保存的时候检查代码是否规范

9.第三方的配置选项放在哪个配置文件中,建议选择 In dedicated config files 放在独立的配置文件中

10.是否保存预设

11.设置预设名

ESlint

是什么

eslint 是可组装的 JavaScript 和 JSX 检查工具,一个工具,用来约束团队成员的代码风格

优点

js中的字符串统一使用单引号表示

代码缩进,统一使用两个空格

不允许出现>= 2个的连续空行

常见的eslint规则

1.不允许出现连续的空行

2.文件末尾必须包括一个空白行

3.需要省略不必要的分号

4.禁止使用拖尾逗号

5.行末禁止出现多余的空行

6.必须使用两个空格进行缩进

7.字符串必须使用单引号

8.函数形参的 () 之间必须有空格

修改语法规则

1.找到项目根目录下.eslintrc.js配置文件

2.在rules配置选项中,修改默认的语法规则

rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off''规则名':['error','never']
}

有 never 就是禁止,没有 never 就是默认,默认的是 always

修正错误

1.人肉修改

2.yarn lint 脚手架自动修复,参照eslint功能修复

3.修改规则

4.eslint插件

ESlint

Prettier

Prettier ESlint