zoukankan      html  css  js  c++  java
  • react-cli

    image
    image
    image

    更新日志:

    v1.2.0

    ...未完待续

    v1.1.0

    实现细节:

    添加editorconfig

    editorconfig 帮助我们约束多个开发者在同一个项目中代码风格,更重要的是它是跨编辑器,IDE 的。

    # http://editorconfig.org
    # 这是根文件,不用继续往上查找
    root = true
    
    # 匹配全部文件
    [*]
    # 缩进风格,可选"space"、"tab"
    indent_style = space
    # 缩进的空格树 2
    indent_size = 2
    # 结尾换行符,可选"if"、"or"、"orif"
    end_of_line = lf
    # 设置字符集
    charset = utf-8
    # 删除一行中的前后空格
    trim_trailing_whitespace = true
    # 在文件结尾插入新行
    insert_final_newline = true
    
    

    配置ESLint

    ESLint 可以约束团队成员的代码风格,并且找出一些容易产生问题的代码。vscode 中安装 ESLint 后可以在 问题 面板中看到 ESLint 提示的各种错误。ESLint 自带的 autoFix 也挺好用的。

    create-react-app 默认集成了ESLint, 要让编辑器正确提示ESLint错误,需要在项目根目录添加 .eslintrc.js:

    /**
     * create-react-app默认集成了ESLint, 此配置让编辑器正确提示ESLint错误
     */
    module.exports = {
      extends: ['react-app'],
    };
    
    

    并且将package.json的配置移除

    -  "eslintConfig": {
    -    "extends": "react-app"
    -  },
    

    为了让vscode的eslint插件启用typescript支持,需要添加下面的配置到项目文件夹中 文件->首选项-> 设置-> 项目文件夹。或者你也可以专门去保存工作区,添加这些配置到工作区中。

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

    集成prettier

    你进一步编辑 .eslintrc.js 文件,这些更改也 只会影响编辑器集成。它们不会影响终端和浏览器中的 lint 输出。这是因为 Create React App 有意提供了一组最常见的错误规则。

    如果要为项目强制执行编码风格,就需要考虑使用 Prettier 而不是 ESLint 样式规则。

    /**
     * https://prettier.io/docs/en/options.html:请确保先执行了 npm i -D prettier
     * 项目代码风格优先级
     * 1. .perttierc.js
     * 2. .editorconfig
     * 3. vscode中的设置
     */
    module.exports = {
      // 指定打印机将换行的行长度。默认 80
      printWidth: 100,
      // 指定每个缩进级别的空格数。默认 2
      // tabWidth: 2,
      // 指定使用制表符缩进行。 默认 false
      // useTabs: false,
      // 在语句末尾打印分号。默认 true
      // semi: true,
      // 使用单引号而不是双引号。默认 false
      singleQuote: true,
      // 引用对象中的属性时更改:默认 as-needed-仅在需要时在对象属性周围添加引号。可选"consistent" - 如果对象中至少有一个属性需要引号,则引用所有属性。"preserve" - 尊重对象属性中引号的输入用法。
      // quoteProps: 'as-needed',
      // 在jsx中使用单引号。默认 false
      jsxSingleQuote: true,
      // 多行时尽可能打印尾随逗号。默认 none-没有尾随逗号。可选:es5:在ES5中有效的尾随逗号(对象、数组等)。例如本文件,设置成 es5,就算你最后一个属性-属性值没有加逗号,也会帮你自动加上逗号
      trailingComma: 'es5',
      // 在对象文字中打印括号之间的空格。默认 true
      // bracketSpacing: true,
      // 将>多行JSX元素放在最后一行的末尾,而不是单独放在下一行(不适用于自闭元素)。默认false
      // jsxBracketSameLine: false,
      // 在单个箭头函数参数周围加上括号。默认 avoid-尽可能的省略parens。例 x => x。可选 "always"-使用包括parens。例 (x) => x
      arrowParens: 'avoid',
      // 指定格式化文件的开始行。默认 0
      // rangeStart: 0,
      // 指定格式化文件的结束行。默认 Infinity
      // rangeEnd: Infinity
      // 指定要使用的解析器。prettier会自动从输入文件路径中推断出解析器。因此不必更改此设置。默认 babylon
      // parser: 'babylon'
      // 指定用于推断要使用的解析器的文件名
      // filepath: ''
      // 需要编译指示。默认 false
      // requirePragma: false
      // 插入Pragma。默认 false
      // insertPragma: false
      // 散文包裹。默认 preserve-按原样包装散文。可选,always-如果超过打印宽度就包装。never-不要包装
      // proseWrap: 'preserve'
      // HTML空白灵敏度 默认 css-尊重css display属性的默认值。可选:strict-空格被认为是敏感的,ignore-空格被认为是不敏感的
      // htmlWhitespaceSensitivity: 'css',
      // 行结尾:默认 auto-维护现有的行结尾,可选 lf-(
    ),在Linux和macOS以及git repos 内部很常见 crlf-回车符+换行符(
    ), 在Windows上很常见 cr-仅限回车符,很少使用
      // endOfLine: 'auto',
    };
    
    

    集成 lint-staged

    前面虽然是在自己的电脑自己的编辑器里添加了一些配置,当自己保存时就可以自动格式化自己写的代码。我但是我们并不能强求别人也用vscode来编码,可能别人用习惯了webstorm等。这时候为了继续维持项目统一的风格,最好是在react-cli脚手架工具中直接体现,而尽可能少的让别人需要去做别的编辑器配置。

    这一小节做的就是让大家在git commit的时候自动触发prettier格式化代码的命令。

    npm i -D husky lint-staged
    

    接下来配置 husky 和 lint-staged。在package.json中加入下面内容。

    "husky": {
        "hooks": {
          "pre-commit": "lint-staged"
        }
      },
      "lint-staged": {
        "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
          "prettier --single-quote --write",
          "git add"
        ]
      },
    

    v1.0.0

    实现细节:

    npm 设为淘宝源

    npm config set registry https://registry.npm.taobao.org
    
  • 相关阅读:
    Git_创建版本库
    Git_安装Git
    Git_集中式vs分布式
    Git_git的诞生
    echartShow
    微信小程序红包开发 小程序发红包 开发过程中遇到的坑 微信小程序红包接口的
    vue2.0 $router和$route的区别
    vue移动端开发全家桶
    干货分享:vue2.0做移动端开发用到的相关插件和经验总结
    优秀的基于VUE移动端UI框架合集
  • 原文地址:https://www.cnblogs.com/hezhi/p/11023275.html
Copyright © 2011-2022 走看看