<rp id="wnpn7"><ruby id="wnpn7"></ruby></rp>
<progress id="wnpn7"><track id="wnpn7"><rt id="wnpn7"></rt></track></progress>
<ruby id="wnpn7"></ruby>
<ruby id="wnpn7"><blockquote id="wnpn7"><div id="wnpn7"></div></blockquote></ruby>

    1. <em id="wnpn7"><ruby id="wnpn7"><input id="wnpn7"></input></ruby></em>
      1. <button id="wnpn7"><acronym id="wnpn7"></acronym></button><button id="wnpn7"><acronym id="wnpn7"></acronym></button>

        <rp id="wnpn7"><acronym id="wnpn7"></acronym></rp>

        <li id="wnpn7"><object id="wnpn7"><u id="wnpn7"></u></object></li>
        VB.net 2010 視頻教程 VB.net 2010 視頻教程 python基礎視頻教程
        SQL Server 2008 視頻教程 c#入門經典教程 Visual Basic從門到精通視頻教程
        當前位置:
        首頁 > 編程開發 > .net教程 >
        • ASP.net教程之react-cli

        react-cli

         

        image
        image
        image

        更新日志:

        v1.2.0

        ...未完待續

        v1.1.0

        • 添加editorconfig
        • 配置ESLint
        • 集成prettier
        • 集成 lint-staged

        實現細節:

        添加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-(\n),在Linux和macOS以及git repos 內部很常見 crlf-回車符+換行符(\r\n), 在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 設為淘寶源
        • 在TypeScript中使用antd
        • 國際化

        實現細節:

        npm 設為淘寶源

        npm config set registry https://registry.npm.taobao.org

        相關教程
                
        免费看成年人视频大全_免费看成年人视频在线观看