天學會html+css，第六天橫向導航。

今天的學習目標是這部分橫向導航菜單。

·找到中間盒子，在里面添加ul列表，結構跟昨天的縱向導航菜單一樣。文本內容快速添加，看下效果。

·然后從外到內依次寫css樣式，ul的高度跟上一層一樣，默認樣式黑點去掉，看下效果。

·給 li添加左浮動，讓它們從縱向排列變成橫向排列。在給a標簽寫css樣式之前，別忘了要添加這句代碼。

·接著去掉默認樣式下劃線，文字顏色用黑色，文字水平居中的方法，讓高度和行高一樣，看下效果。

·再給每個a標簽的右邊都加上一定的內邊距，讓它們變寬，看起來就分開了。

·最后還有一個文字變色的效果，給a標簽加上hove偽類，顏色設置為紅色，看下效果。

到此，今天的學習完成。

的需求需要在網頁上寫代碼。

比如在線執行代碼的 playground：

或者在線面試：

如果讓你實現網頁版 TypeScript 編輯器，你會如何做呢？

有的同學說，直接用微軟的 monaco editor 呀：

確實，直接用它就可以，但是有挺多地方需要處理的。

我們來試試看。

npx create-vite

創建個 vite + react 的項目。

安裝依賴：

npm install

npm install @monaco-editor/react

這里用 @monaco-editor/react 這個包，它把 monaco editor 封裝成了 react 組件。

去掉 main.tsx 里的 index.css

然后在 App.tsx 用一下：

import MonacoEditor from '@monaco-editor/react'

export default function App() {

  const code = `import lodash from 'lodash';
function App() {
  return <div>guang</div>  
}  
  `;

  return <MonacoEditor
      height={'100vh'}
      path={"guang.tsx"}
      language={"typescript"}
      value={code}
  />
}

跑下開發服務：

npm run dev

試下看：

現在就可以在網頁寫 ts 代碼了。

但是有報錯：

jsx 語法不知道怎么處理。

這里明顯要改 typescript 的 tsconfig.json。

怎么改呢？

這樣：

import MonacoEditor, { OnMount } from '@monaco-editor/react'

export default function App() {

  const code = `import lodash from 'lodash';
function App() {
  return <div>guang</div>  
}  
  `;

  const handleEditorMount: OnMount = (editor, monaco) => {
    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
        jsx: monaco.languages.typescript.JsxEmit.Preserve,
        esModuleInterop: true,
    })

}

  return <MonacoEditor
      height={'100vh'}
      path={"guang.tsx"}
      language={"typescript"}
      onMount={handleEditorMount}
      value={code}
  />
}

onMount 的時候，設置 ts 的 compilerOptions。

這里設置 jsx 為 preserve，也就是輸入 <div> 輸出 <div>，保留原樣。

如果設置為 react 會輸出 React.createElement("div")。

再就是 esModuleInterop，這個也是 ts 常用配置。

默認 fs 要這么引入，因為它是 commonjs 的包，沒有 default 屬性：

import * as fs from 'fs';

設置 esModuleInterop 會在編譯的時候自動加上 default 屬性。

就可以這樣引入了：

import fs from 'fs';

可以看到，現在 jsx 就不報錯了：

還有一個錯誤：

沒有 lodash 的類型定義。

寫 ts 代碼沒提示怎么行呢？

我們也要支持下。

這里用到 @typescript/ata 這個包：

ata 是 automatic type acquisition 自動類型獲取。

它可以傳入源碼，自動分析出需要的 ts 類型包，然后自動下載。

我們新建個 ./ata.ts，復制文檔里的示例代碼：

import { setupTypeAcquisition } from '@typescript/ata'
import typescriprt from 'typescript';

export function createATA(onDownloadFile: (code: string, path: string) => void) {
  const ata = setupTypeAcquisition({
    projectName: 'my-ata',
    typescript: typescriprt,
    logger: console,
    delegate: {
      receivedFile: (code, path) => {
        console.log('自動下載的包', path);
        onDownloadFile(code, path);
      }
    },
  })

  return ata;
}

安裝用到的包：

npm install --save @typescript/ata -f 

這里就是用 ts 包去分析代碼，然后自動下載用到的類型包，有個 receivedFile 的回調函數里可以拿到下載的代碼和路徑。

然后在 mount 的時候調用下：

const ata = createATA((code, path) => {
    monaco.languages.typescript.typescriptDefaults.addExtraLib(code, `file://${path}`)
})

editor.onDidChangeModelContent(() => {
    ata(editor.getValue());
});

ata(editor.getValue());

就是最開始獲取一次類型，然后內容改變之后獲取一次類型，獲取類型之后用 addExtraLib 添加到 ts 里。

看下效果：

有類型了！

寫代碼的時候用到的包也會動態去下載它的類型：

比如我們用到了 ahooks，就會實時下載它的類型包然后應用。

這樣，ts 的開發體驗就有了。

再就是現在字體有點小，明明內容不多右邊卻有一個滾動條：

這些改下 options 的配置就好了：

scrollBeyondLastLine 是到了最后一行之后依然可以滾動一屏，關閉后就不會了。

minimap 就是縮略圖，關掉就沒了。

scrollbar 是設置橫向縱向滾動條寬度的。

theme 是修改主題。

return <MonacoEditor
      height={'100vh'}
      path={"guang.tsx"}
      language={"typescript"}
      onMount={handleEditorMount}
      theme: "vs-dark",
      value={code}
      options={
        {
          fontSize: 16,
          scrollBeyondLastLine: false,
          minimap: {
            enabled: false,
          },
          scrollbar: {
            verticalScrollbarSize: 6,
            horizontalScrollbarSize: 6,
          }
        }
    }
  />

好多了。

我們還可以添加快捷鍵的交互：

默認 cmd（windows 下是 ctrl） + j 沒有處理。

我們可以 cmd + j 的時候格式化代碼。

editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyJ, () => {
    editor.getAction('editor.action.formatDocument')?.run()
});

試下效果：

有同學可能問，monaco editor 還有哪些 action 呢？

打印下就知道了：

editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyJ, () => {
    // editor.getAction('editor.action.formatDocument')?.run()
    let actions = editor.getSupportedActions().map((a) => a.id);
    console.log(actions);
});

有 131 個：

用到再搜就行。

這樣，我們的網頁版 TypeScript 編輯器就完成了。

總結

有的需求需要實現網頁版編輯器，我們一般都用 monaco editor 來做。

今天我們基于 @monaco-editor/react 實現了 TypeScript 編輯器。

可以在 options 里配置滾動條、字體大小、主題等。

然后 onMount 里可以設置 compilerOptions，用 addCommand 添加快捷鍵等。

并且我們基于 @typescript/ata 實現了自動下載用到的 ts 類型的功能，它會掃描代碼里的 import，然后自動下載類型，之后 addExtraLib 添加到 ts 里。

這樣在網頁里就有和 vscode 一樣的 ts 編寫體驗了。

原文鏈接：https://juejin.cn/post/7361934843209777152