[記錄](méi)使用 create-react-app(TypeScript)時(shí)的一個(gè)錯(cuò)誤處理

在使用 create-react-app 時(shí),指定了語(yǔ)言為 TypeScript:

create-react-app charley-react-typescript --scripts-version=react-scripts-ts

在使用 Antd UI庫(kù)時(shí),引入相關(guān)的組件:

import * as React from 'react';
import './assets/css/main.css';
import Button from 'antd/lib/button';

class App extends React.Component {
    public render() {
        return (
            <div className='App'>
                <Button type='primary'>Button</Button>
            </div>
        );
    }
}

export default App;

main.css 內(nèi)容如下:

@import '~antd/dist/antd.css';

運(yùn)行 yarn start,打開(kāi)瀏覽器,發(fā)現(xiàn)報(bào)了一個(gè)錯(cuò)誤:

Import sources within a group must be alphabetized.

這是由于 tslint 規(guī)定了必須按順序?qū)胛募采w這個(gè)規(guī)則,需要在根目錄的的 tslint.json 中增加以下配置:

{
  "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
+  "rules": {
+    "ordered-imports": false
+  },
  "linterOptions": {
    "exclude": [
      "config/**/*.js",
      "node_modules/**/*.ts"
    ]
  }
}

然后重啟服務(wù),運(yùn)行 yarn start,就不會(huì)再報(bào)這個(gè)錯(cuò)誤了。

完。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容