我們的日常工作中，往往充斥著各種瑣碎的任務：打開項目，搜索信息，查文檔等。這些任務不斷的侵蝕著我們的專注力，降低我們的工作效率。
Script Kit[1] 是一個功能強大，易用的啟動器(啟動器如 Mac 上的 Alfred)。它可以幫助我們快速的完成這些瑣碎任務。
本文來做一個 Demo，實現如下幾種任務：
- 文本搜索。
- 打開網站。
- 用搜索引擎搜索信息。
- 打開項目。
- 查看代碼參考。
下面，我們來 Building 吧~
第 1 步 安裝 Script Kit
在 官網[2] 下載安裝包安裝。
打開 Script Kit 后，Script Kit 處于最小化狀態。展開 Script Kit 有兩種方式:
- 快捷鍵command + ;。
- 點擊頭部狀態欄中的圖標。
第 2 步 創建腳本
進入 Script Kit 輸入腳本的名字，然后回車，就完成了腳本的創建。我們這邊的 Demo 的名字叫 nav。
Script Kit 創建了如下的腳本文件 nav.js
// Name: nav
import "@johnlindquist/kit"
其中:
- // Name: nav: 該腳本的名稱。
- import "@johnlindquist/kit": 引入基礎庫。這是必須的。
第 3 步 運行腳本
在上面的腳本中添加內容，div('Hello World!'):
// Name: nav
import "@johnlindquist/kit"
div('Hello World!')
展開 Script Kit(command + ;), 輸入 nav:
按回車運行，會出現如下的結果:
第 4 步 制作列表
實現代碼如下：
const selected = await arg('請選擇', [
// 文本
{
name: '快速創建 React 項目的命令',
description: '用 cra 創建',
tag: '文本',
value: {
type: 'text',
content: 'npx create-react-app 項目名稱',
}
},
// 鏈接
{
name: 'Vue3 文檔',
description: 'Vue3 的官方文檔地址',
tag: '鏈接',
value: {
type: 'url',
content: 'https://cn.vuejs.org/guide/introduction.html'
}
},
// 搜索引擎
{
name: '必應',
description: '用必應搜索信息',
tag: '搜索引擎',
value: {
type: 'search-engine',
content: 'https://cn.bing.com/search?q={q}'
}
},
// 項目
{
name: 'JoJo 石之海 官網項目',
description: '用 VSCode 打開該項目',
tag: '項目',
value: {
type: 'project',
content: home('project/jojo/website')
}
},
// 代碼參考
{
name: 'React 相關 ts 類型寫法',
tag: '代碼參考',
preview: async () => {
const code = await highlightCode({
contents: codeContent,
language: 'javascript'
})
return code
},
value: {
type: 'search-engine',
content: 'https://cn.bing.com/search?q={q}'
}
},
])列表中的每個選項對應上面數組中一個 item。內容和代碼的對應關系如下：
value 是用戶選擇后，程序接收到的值。用 type 來標識不同的 item 類型。后面會根據不同的 type，做不同的處理。
item 中的 preview 是設置選中時的預覽內容。如下圖所示：
上圖中的代碼預覽用的第三方包：highlight.js。實現代碼如下：
const wrapCode = (html) => `<pre class="px-4">
<style type="text/css">
code {
font-size: 0.75rem !important;
width: 100%;
white-space: pre-wrap;
}
pre {
display: flex;
}
p {
margin-bottom: 1rem;
}
</style>
<code>
${html.trim()}
</code>
</pre>`;
const highlightCode = async ({ contents, language }) => {
const { default: highlight } = await npm("highlight.js");
let highlightedContents = language
? highlight.highlight(contents, { language }).value
: highlight.highlightAuto(contents).value;
return wrapCode(highlightedContents);
};
可以看到，在腳本中使用 npm 包只要這么寫：await npm("包名")。
第 5 步 選擇后的處理
對選擇不同類型的內容，做不同的處理：
- 選中文本：將文本復制到粘貼板。
- 選中鏈接：在瀏覽器中打開鏈接。
- 選中搜索引擎：輸入關鍵字，用搜索引擎搜索。
- 選中項目：在 VSCode 中打開項目。
代碼如下：
const {
content,
type,
} = selected
switch(type) {
// 文本
case 'text':
copy(content) // 將文本復制到粘貼板。
break
// 鏈接
case 'url':
browse(content) // 用瀏覽器打開。
break
// 搜索引擎
case 'search-engine':
const query = await arg('關鍵字:')
const url = content.replace('{q}', encodeURIComponent(query))
browse(url)
break
// 項目
case 'project':
exec(`code ${content}`) // 用 VSCode 打開。
break
}上面的 copy, browse, exec 是 Script Kit 內置的功能。Script Kit 內置了茫茫多的功能。
第 6 步 細節優化
自定義腳本名稱并加上描述信息
代碼如下:
// Name: 導航
// Description:
效果如下：
設置啟動該腳本的快捷鍵
按住 cmd + shift + 0，可以直接運行腳本。
加交互反饋
文本內容復制到粘貼板，加交互提示：
copy(content) // 將文本復制到粘貼板。
new applescript(`display alert "內容已拷貝到粘貼板"`)
完整代碼: 這里[3]
其他功能
本文介紹的只是 Script Kit 功能的冰山一角。
可以通過 AppleScript[4] 和 本地應用交互。比如，如下腳本實現了關閉所有的 Finder 窗口：
new applescript(`
tell application "Finder"
set theWindowList to windows
repeat with i from 1 to number of items in theWindowList
set this_item to item i of theWindowList
set windowName to name of this_item
close this_item
end repeat
end tell
`)
調接口來查詢網上的信息，生成摘要并顯示。比如，查詢圖書信息信息
let query = await arg('Search for a book title:')
//This API can be a little slow. Wait a couple seconds
let response = await get(`http://openlibrary.org/search.json?q=${query}`)
let transform = ({title, author_name}) =>
`* "${title}" - ${author_name?.length && author_name[0]}`
let markdown = response.data.docs.map(transform).join('\n')
inspect(markdown, 'md')用定時任務來做定時需要做的事。每天間隔2個小時提醒喝水。
常見問題
如何調試?
支持哪些全局對象？
常用的：
// 展示內容
div // 渲染 html 內容
md: Markdown // 渲染 markdown 內容
terminal: (script: string) => Promise<string> // 打開命令行，并執行腳本
// 接口調用。用的是 Axios。
get: AxiosInstance["get"]
put: AxiosInstance["put"]
post: AxiosInstance["post"]
patch: AxiosInstance["patch"]
// 文件操作
readFile: typeof fsPromises.readFile
writeFile: typeof fsPromises.writeFile
appendFile: typeof fsPromises.appendFile
createWriteStream: typeof fs.createWriteStream
readdir: typeof fsPromises.readdir
cd: typeof shelljs.cd
cp: typeof shelljs.cp
chmod: typeof shelljs.chmod
ls: typeof shelljs.ls
mkdir: typeof shelljs.mkdir
mv: typeof shelljs.mv
// 存取數據
db:
所有的見這里[5]。
參考資料
[1]Script Kit: https://www.scriptkit.com/
[2]官網: https://www.scriptkit.com/
[3]這里: https://github.com/iamjoel/rocket/blob/main/code/glue/script-kit/intro/nav.js
[4]AppleScript: https://developer.apple.com/library/archive/documentation/AppleScript/Conceptual/AppleScriptLangGuide/introduction/ASLR_intro.html
[5]這里: https://github.com/johnlindquist/kit/discussions/187
