我們的日常工作中，往往充斥著各種瑣碎的任務(wù)：打開(kāi)項(xiàng)目，搜索信息，查文檔等。這些任務(wù)不斷的侵蝕著我們的專(zhuān)注力，降低我們的工作效率。
Script Kit[1] 是一個(gè)功能強(qiáng)大，易用的啟動(dòng)器(啟動(dòng)器如 Mac 上的 Alfred)。它可以幫助我們快速的完成這些瑣碎任務(wù)。
本文來(lái)做一個(gè) Demo，實(shí)現(xiàn)如下幾種任務(wù)：
- 文本搜索。
- 打開(kāi)網(wǎng)站。
- 用搜索引擎搜索信息。
- 打開(kāi)項(xiàng)目。
- 查看代碼參考。
下面，我們來(lái) Building 吧~
第 1 步 安裝 Script Kit
在 官網(wǎng)[2] 下載安裝包安裝。
打開(kāi) Script Kit 后，Script Kit 處于最小化狀態(tài)。展開(kāi) Script Kit 有兩種方式:
- 快捷鍵command + ;。
- 點(diǎn)擊頭部狀態(tài)欄中的圖標(biāo)。
第 2 步 創(chuàng)建腳本
進(jìn)入 Script Kit 輸入腳本的名字，然后回車(chē)，就完成了腳本的創(chuàng)建。我們這邊的 Demo 的名字叫 nav。
Script Kit 創(chuàng)建了如下的腳本文件 nav.js
// Name: nav
import "@johnlindquist/kit"
其中:
- // Name: nav: 該腳本的名稱(chēng)。
- import "@johnlindquist/kit": 引入基礎(chǔ)庫(kù)。這是必須的。
第 3 步 運(yùn)行腳本
在上面的腳本中添加內(nèi)容，div('Hello World!'):
// Name: nav
import "@johnlindquist/kit"
div('Hello World!')
展開(kāi) Script Kit(command + ;), 輸入 nav:
按回車(chē)運(yùn)行，會(huì)出現(xiàn)如下的結(jié)果:
第 4 步 制作列表
實(shí)現(xiàn)代碼如下：
const selected = await arg('請(qǐng)選擇', [
// 文本
{
name: '快速創(chuàng)建 React 項(xiàng)目的命令',
description: '用 cra 創(chuàng)建',
tag: '文本',
value: {
type: 'text',
content: 'npx create-react-app 項(xiàng)目名稱(chēng)',
}
},
// 鏈接
{
name: 'Vue3 文檔',
description: 'Vue3 的官方文檔地址',
tag: '鏈接',
value: {
type: 'url',
content: 'https://cn.vuejs.org/guide/introduction.html'
}
},
// 搜索引擎
{
name: '必應(yīng)',
description: '用必應(yīng)搜索信息',
tag: '搜索引擎',
value: {
type: 'search-engine',
content: 'https://cn.bing.com/search?q={q}'
}
},
// 項(xiàng)目
{
name: 'JoJo 石之海 官網(wǎng)項(xiàng)目',
description: '用 VSCode 打開(kāi)該項(xiàng)目',
tag: '項(xiàng)目',
value: {
type: 'project',
content: home('project/jojo/website')
}
},
// 代碼參考
{
name: 'React 相關(guān) ts 類(lèi)型寫(xiě)法',
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}'
}
},
])列表中的每個(gè)選項(xiàng)對(duì)應(yīng)上面數(shù)組中一個(gè) item。內(nèi)容和代碼的對(duì)應(yīng)關(guān)系如下：
value 是用戶(hù)選擇后，程序接收到的值。用 type 來(lái)標(biāo)識(shí)不同的 item 類(lèi)型。后面會(huì)根據(jù)不同的 type，做不同的處理。
item 中的 preview 是設(shè)置選中時(shí)的預(yù)覽內(nèi)容。如下圖所示：
上圖中的代碼預(yù)覽用的第三方包：highlight.js。實(shí)現(xiàn)代碼如下：
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 包只要這么寫(xiě)：await npm("包名")。
第 5 步 選擇后的處理
對(duì)選擇不同類(lèi)型的內(nèi)容，做不同的處理：
- 選中文本：將文本復(fù)制到粘貼板。
- 選中鏈接：在瀏覽器中打開(kāi)鏈接。
- 選中搜索引擎：輸入關(guān)鍵字，用搜索引擎搜索。
- 選中項(xiàng)目：在 VSCode 中打開(kāi)項(xiàng)目。
代碼如下：
const {
content,
type,
} = selected
switch(type) {
// 文本
case 'text':
copy(content) // 將文本復(fù)制到粘貼板。
break
// 鏈接
case 'url':
browse(content) // 用瀏覽器打開(kāi)。
break
// 搜索引擎
case 'search-engine':
const query = await arg('關(guān)鍵字:')
const url = content.replace('{q}', encodeURIComponent(query))
browse(url)
break
// 項(xiàng)目
case 'project':
exec(`code ${content}`) // 用 VSCode 打開(kāi)。
break
}上面的 copy, browse, exec 是 Script Kit 內(nèi)置的功能。Script Kit 內(nèi)置了茫茫多的功能。
第 6 步 細(xì)節(jié)優(yōu)化
自定義腳本名稱(chēng)并加上描述信息
代碼如下:
// Name: 導(dǎo)航
// Description:
效果如下：
設(shè)置啟動(dòng)該腳本的快捷鍵
按住 cmd + shift + 0，可以直接運(yùn)行腳本。
加交互反饋
文本內(nèi)容復(fù)制到粘貼板，加交互提示：
copy(content) // 將文本復(fù)制到粘貼板。
new applescript(`display alert "內(nèi)容已拷貝到粘貼板"`)
完整代碼: 這里[3]
其他功能
本文介紹的只是 Script Kit 功能的冰山一角。
可以通過(guò) AppleScript[4] 和 本地應(yīng)用交互。比如，如下腳本實(shí)現(xiàn)了關(guān)閉所有的 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
`)
調(diào)接口來(lái)查詢(xún)網(wǎng)上的信息，生成摘要并顯示。比如，查詢(xún)圖書(shū)信息信息
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')用定時(shí)任務(wù)來(lái)做定時(shí)需要做的事。每天間隔2個(gè)小時(shí)提醒喝水。
常見(jiàn)問(wèn)題
如何調(diào)試?
支持哪些全局對(duì)象？
常用的：
// 展示內(nèi)容
div // 渲染 html 內(nèi)容
md: Markdown // 渲染 markdown 內(nèi)容
terminal: (script: string) => Promise<string> // 打開(kāi)命令行，并執(zhí)行腳本
// 接口調(diào)用。用的是 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
// 存取數(shù)據(jù)
db:
所有的見(jiàn)這里[5]。
參考資料
[1]Script Kit: https://www.scriptkit.com/
[2]官網(wǎng): 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
