vue项目起步之 编程规范

vue项目起步之 编程规范

如何更规范的开发？

子曰：工欲善其事，必先利其器 VScode 配置

• 安装 prettier
  
• 设置中开启 保存代码时自动格式化 √
  

vue根目录创建 .prettierrc 文件 进行简单配置

• 更多配置访问 prettier官网

{
  // 全部不尾随分号
  "semi": false,
  // 全部使用单引号
  "singleQuote": true,
  // 多行逗号分割的语法中，最后一行不加逗号
  "trailingComma": "none"
}

设置VScode Tab制表符键 空格数量

• vscode 默认是 4 个空格 而Eslint更建议空格数为 2
  

VScode 安装了多种代码格式化工具产生了冲突?

• 在当前vue文件中 点击右键 使用...格式化文档>配置默认格式化程序>最后选择Prettier - Code formatter
  
  

解决 Eslint 和 Prettier 之间的冲突问题

• 场景：写的时候不报错 检查也不报错 保存后就报错 eslint语法格式有问题产生的报错
• 报错

error  Missing space before function parentheses  space-before-function-paren

• 原因
  
• 解决
• 在 .eslintrc.js 文件中 覆盖 eslint 规则 'space-before-function-paren': 'off'(off或者0表示关闭)

 rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'space-before-function-paren': 'off'
  }

vue 项目页面首行报错

• 报错信息

Component name "xxx" should always be multi-word

• 原因：组件名称不符合 eslint 规范
• 解决：在 vue.config.js 中 添加 lintOnSave: false 即可
  

狗皮膏药似的 还是没用

• 可能原因：插件有问题 是否安装了 eslint 插件 或者 vue插件造成的 （优先禁用掉eslint 类型的插件）