zl程序教程

您现在的位置是:首页 >  前端

当前栏目

60.(前端)编写代码严格解决方案

前端解决方案代码 编写 60 严格
2023-09-27 14:23:04 时间

1.概述

使用vue-cli脚手架前端编写代码总是非常严格。比如,缺一个空格,多一个换行符,单双引号的混用。这些都不是什么特别大的问题,但是总是会抛出错误,编写效率特别低下,以下总结了如何解决这个问题

2.解决方案

2.1 关闭eslint验证(不推荐!!!!!)

创建项目时,不开启eslint功能即可(Use ESLint to lint your code?)
是否使用ESLint去限制你编写的代码;
当然,这功能还是有一些挺有用的,所以建议保留,或者说,项目已经创建好了,不可能重新创一次!

2.2 配置适合的规则(推荐!!!!)

配置规则的含义和常用规则这里就不介绍了,因为实在太多,很麻烦。我就把几个不好用的规则关闭进行展示即可
但是关闭空格问题space-before-function-paren,确实需要使用这个!!!!

简单来说,就是报什么错误,放到rules中改成0
// eslintrc.js
// eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'space-before-function-paren':0
  }
}


2.3 使用prettier插件格式化相应的规则方便格式化时使用

在根目录下创建.prettierrc.json

  1. 关闭单双引号混用导致报错
  2. 是否使用分号
  3. tab缩进有几个空格
  4. 空格报错问题
  5. 空行报错问题
{   
    "singleQuote":true,
    "semi":false,
    "tabWidth":2,
    "bracketSpacing":true,
    "jsxBracketSameLine":true

}