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