我開發經常使用的十八款提效工具

如下是山月在開發中經常使用的工具，所有收藏在個人週刊中。另外我也在開發更多適用於本身的開發者百寶箱，諸位讀者可多多提意見

山月週刊 (Github: shfshanyue/weekly)，每週記錄關於前端的開源工具、優秀文章、重大庫版本發佈記錄等等。每週一發布，訂閱平臺以下，歡迎訂閱。

• 訂閱網站: https://weekly.shanyue.tech
• 訂閱Github: shfshanyue/weekly

一、 Web Developer 瀏覽器插件

一款服務於 Web 開發者的瀏覽器插件，能夠針對該網站作更深刻的操做，如

1. 禁止 Javascript
2. 禁止 CSS
3. 顯示頁面全部圖片
4. ...

二、 Emmet: Web 開發者的利器

高效的前端開發利器，可在 Vue/React 中快速書寫修改 HTML/CSS，並支持多種編輯器，如流行的 VSCode。

它最大的功能就是把 CSS 樣式的縮寫 轉化爲 HTML，如輸入 #page>(#header>ul#nav>li*4>a)+(#content>h1{Hello world}+p)+#footer，並按下 Tab 鍵，自動生成如下 HTML

<div id="page">
  <div id="header">
    <ul id="nav">
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
  </div>
  <div id="content">
    <h1>Hello world</h1>
    <p></p>
  </div>
  <div id="footer"></div>
</div>

以上擴展縮寫的功能被稱爲 Expand Abbreviation。除此以外，它還有更多細緻的功能，這些功能在 Emmet 中被稱爲 Action

1. 去除最外層標籤
2. 包裹選中的標籤
3. ...

• repo: emmetio/emmet

• npm: emmet

三、 URL-encoder for SVG

把 SVG 轉化爲 DataURI，並嵌入到 CSS 樣式中

四、 Svg Viewer

可視化 SVG，並支持壓縮圖片、轉化爲 React/RN 組件、轉化爲 png 格式的圖片等

五、 svg-term-cli: 把終端操做錄製爲 SVG 動畫

基於 asciinema 的一款軟件，使用 javascript 編寫。可把終端動做錄製爲 svg 動畫

$ cat demo.cast | svg-term > demo.svg

• repo: marionebl/svg-term-cli

• npm: svg-term-cli

六、 asciinema: 終端動做錄製軟件

使用 python 編寫的一款可記錄終端操做命令動畫的工具軟件，可在線播放。藉助第三方工具能夠轉化爲 gif 動畫或者 svg 動畫。

使用如下兩行命令可快速開始錄製終端。

$ brew install asciinema

$ asciinema rec

• repo: asciinema/asciinema

七、 Prettier Playground: 任意語言代碼格式化

Prettier 是一款優秀的代碼格式化工具

八、 Chrome Platform Status: Chrome 發佈版本新特性大覽

列舉每個 Chrome 的新特性大全，目前的穩定版本及下一個版本的發佈日期等。

九、 cssffects: 多種超實用 CSS 動畫

收集多種 CSS 動畫，大部分是各類 hover 效果、loading 動畫等，純 CSS 實現。收藏以備獨立設計網站時的不時之需。

• repo: emilkowalski/css-effects-snippets

十、 SVG Wave Generator

隨機生成一個波浪SVG，可調整鋸齒、波折程度等，並可保存爲 SVG/PNG/JPG

十一、 Explain Shell: 圖示任一命令行每一個參數的釋義

可稱之爲學習及書寫 shell 的最佳輔助神器，輸入任一 linux 命令，都會一一指出每一個參數的釋義，PIPE 嵌套且複雜的命令也可解析。

十二、 Browser Logos: 瀏覽器高清分辨率 Logo

這是 Github 的一個倉庫，你能夠直接引用地址，找到任意瀏覽器高清分辨率的Logo。

若是引用 Github 地址比較慢的話，你能夠試試 jsdelivr 的 CDN

1三、 User Agents: 關於 UA 的一切

擁有大量 UA 的數據庫及相關功能

• 可獲取任意平臺的 UA (Mac/Windows/Android)
• 可獲取任意 Spider/Crawer 的 UA (Baidu/Google/Bing)
• 可隨機生成 UA
• 可解析 UA

1四、 risingstars: 2020年 Javascript 明星項目

2021 年，JS 各個生態圈中最流行的框架及周邊產物，如 React 生態圈、Vue 生態圈、GraphQL 生態圈、構建工具生態圈等

1五、 Lorem Picsum: 隨機一張指定尺寸圖片 API

https://picsum.photos/200/200 將隨機從 Unsplash 取一張指定尺寸的圖片

• repo: DMarby/picsum-photos

1六、 bestofjs: 發現 Javascript 最好的框架與庫

這裏有 JS 生態最流行的庫，實時刷新並推薦，而且可每週訂閱

• repo: ritz078/transform

1七、 TableConvert: 關於表格及任意格式的雙向轉換

支持 Excel、URL、HTML、Markdown、CSV、JSON、LaTeX、SQL、MediaWiki等任意格式的相互轉換

1八、 transform: 編程語言任意格式轉化

支持各類代碼轉化的工具，SVG、JSON、TS、GraphQL、CSS、SQL，只要你能想到的這裏都有。光 JSON 就能夠轉化爲十幾種代碼格式。

• repo: ritz078/transform