2.2 设置deno开发环境

最新推荐文章于 2024-09-09 09:05:32 发布

书简_台湖

最新推荐文章于 2024-09-09 09:05:32 发布

阅读量641

点赞数

分类专栏： deno文档文章标签： typescript javascript node.js

本文链接：https://blog.csdn.net/qq_40674647/article/details/116640574

版权

deno文档专栏收录该内容

7 篇文章 0 订阅

订阅专栏

要高效地使用Deno，您应该设置您的环境。这意味着设置shell自动完成，环境变量以及您选择的编辑器或IDE。

环境变量

有几个环境变量控制Deno的行为：

DENO_DIR默认为，$HOME/.cache/deno但可以设置为任何路径，以控制将生成的和缓存的源代码写入和读取的位置。

NO_COLOR如果设置，将关闭彩色输出。用户代码NO_COLOR无需--allow-env使用布尔常量就可以测试是否已设置Deno.noColor。

shell自动完成

您可以使用以下deno completions <shell>命令为您的shell生成自动完成脚本。该命令输出到stdout，因此您应该将其重定向到适当的文件。

受支持的shell是：

sh
bash
fish
powershell
elvish

示例（bash）：

deno completions bash > /usr/local/etc/bash_completion.d/deno.bash
source /usr/local/etc/bash_completion.d/deno.bash

示例（不带框架的zsh）：

mkdir ~/.zsh # create a folder to save your completions. it can be anywhere
deno completions zsh > ~/.zsh/_deno

然后将此添加到您的 .zshrc

fpath=(~/.zsh $fpath)
autoload -Uz compinit
compinit -u

并重新启动您的终端。请注意，如果仍未加载rm ~/.zcompdump/完成，则可能需要运行以删除先前生成的完成，然后compinit再次生成它们。

示例（zsh + oh-my-zsh）[推荐给zsh用户]：

mkdir ~/.oh-my-zsh/custom/plugins/deno
deno completions zsh > ~/.oh-my-zsh/custom/plugins/deno/_deno

之后，在~/.zshrc文件的plugins标记下添加deno插件。对于诸如 antigenpath将是~/.antigen/bundles/robbyrussell/oh-my-zsh/plugins命令，而命令将是antigen bundle deno诸如此类的工具。

示例（Powershell）：

deno completions powershell >> $profile
.$profile

$HOME\Documents\WindowsPowerShell\Microsoft.PowerShell_profile.ps1默认情况下，这将创建一个Powershell配置文件，并且在您启动PowerShell时将运行它。

编辑器和IDE

由于Deno要求使用文件扩展名进行模块导入并允许http导入，并且当前大多数编辑器和语言服务器本身都不支持此功能，因此许多编辑器会因找不到文件或具有不必要文件扩展名的导入而引发错误。

社区已经为某些编辑器开发了扩展程序，以解决这些问题：

VS CODE

vscode_deno的beta版本在 Visual Studio市场上发布。请报告任何问题。

JetBrains IDE

可通过Deno插件获得对JetBrains IDE的支持。

安装后，将的内容替换为 External Libraries > Deno Library > lib > lib.deno.d.ts的输出 deno types。这将确保扩展名的键入与当前版本匹配。每次更新Deno的版本时，您都必须这样做。有关如何为 Deno设置JetBrains IDE的更多信息，请在YouTrack上阅读此注释。

Vim和NeoVim

如果您安装CoC（智能引擎和语言服务器协议）或ALE（语法检查器和语言服务器协议客户端），则Vim对于Deno / TypeScript来说效果很好。

#####CoC

安装CoC之后，从Vim内部运行:CocInstall coc-tsserver和 :CocInstall coc-deno。:CocCommand deno.initializeWorkspace在您的项目中运行以初始化工作空间配置。从现在开始，诸如gd （转到定义）和gr（转到/查找引用）之类的东西应该起作用。

ALE

ALE与Deno的LSP集成在一起，不需要任何额外的配置。但是，如果您的Deno可执行文件不在中$PATH，与deno您的名称不同，或者您想使用不稳定的功能/ API，则需要覆盖ALE的默认值。请参阅 :help ale-typescript。

ALE提供了对自动完成，重构，定义，查找引用等的支持，但是，键绑定需要手动配置。将以下代码段复制到vimrc/中init.vim进行基本配置，或查阅官方文档以更深入地了解如何配置ALE。

ALE可以通过运行来解决linter问题deno fmt。为了指示ALE使用Deno格式化程序，ale_linter需要基于每个缓冲区（let b:ale_linter = ['deno']）或针对所有TypeScript文件（let g:ale_fixers={'typescript': ['deno']}）全局设置该设置。

" Use ALE autocompletion with Vim's 'omnifunc' setting (press <C-x><C-o> in insert mode)
autocmd FileType typescript set omnifunc=ale#completion#OmniFunc

" Make sure to use map instead of noremap when using a <Plug>(...) expression as the {rhs}
nmap gr <Plug>(ale_rename)
nmap gR <Plug>(ale_find_reference)
nmap gd <Plug>(ale_go_to_definition)
nmap gD <Plug>(ale_go_to_type_definition)

let g:ale_fixers = {'typescript': ['deno']}
let g:ale_fix_on_save = 1 " run deno fmt when saving a buffer

####Emacs

通过结合使用tide这是在Emacs中使用TypeScript的规范方法和 Typescript-deno-plugin用于Deno的官方VSCode扩展的组合，Emacs对于以Deno为目标的TypeScript项目非常有效。

要使用它，请首先确保tide已为您的Emacs实例设置了该文件。接下来，按照typescript-deno-plugin 页面上的指示，首先npm install --save-dev typescript-deno-plugin typescript在您的项目中（npm init -y必要时），然后将以下代码块添加到您的项目中 tsconfig.json，您就可以开始比赛了！

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "typescript-deno-plugin",
        "enable": true, // default is `true`
        "importmap": "import_map.json"
      }
    ]
  }
}

Atom

在Atom上安装基于Atom软件包和基于 Atom-deno软件包。

LSP客户端

从1.6.0版或更高版本开始，Deno内置了对语言服务器协议的支持。

如果您的编辑器支持LSP，则可以将Deno用作TypeScript和JavaScript的语言服务器。

编辑器可以使用启动服务器deno lsp。

Kakoune示例

安装kak-lspLSP客户端后，您可以通过将以下内容添加到您的服务器中来添加Deno语言服务器 kak-lsp.toml

[language.deno]
filetypes = ["typescript", "javascript"]
roots = [".git"]
command = "deno"
args = ["lsp"]

[language.deno.initialization_options]
enable = true
lint = true

Vim / Neovim的示例

安装vim-lspLSP客户端后，您可以通过将以下内容添加到vimrc/中来添加Deno语言服务器 init.vim：

if executable("deno")
  augroup LspTypeScript
    autocmd!
    autocmd User lsp_setup call lsp#register_server({
    \ "name": "deno lsp",
    \ "cmd": {server_info -> ["deno", "lsp"]},
    \ "root_uri": {server_info->lsp#utils#path_to_uri(lsp#utils#find_nearest_parent_file_directory(lsp#utils#get_buffer_path(), "tsconfig.json"))},
    \ "allowlist": ["typescript", "typescript.tsx"],
    \ "initialization_options": {
    \     "enable": v:true,
    \     "lint": v:true,
    \     "unstable": v:true,
    \   },
    \ })
  augroup END
endif

Sublime Text示例

安装Sublime LSP软件包
安装 TypeScript软件包以突出显示语法
将以下.sublime-project文件添加到您的项目文件夹

{
  "settings": {
    "LSP": {
      "deno": {
        "command": [
          "deno",
          "lsp"
        ],
        "initializationOptions": {
          // "config": "", // Sets the path for the config file in your project
          "enable": true,
          // "importMap": "", // Sets the path for the import-map in your project
          "lint": true,
          "unstable": false
        },
        "enabled": true,
        "languages": [
          {
            "languageId": "javascript",
            "scopes": ["source.js"],
            "syntaxes": [
              "Packages/Babel/JavaScript (Babel).sublime-syntax",
              "Packages/JavaScript/JavaScript.sublime-syntax"
            ]
          },
          {
            "languageId": "javascriptreact",
            "scopes": ["source.jsx"],
            "syntaxes": [
              "Packages/Babel/JavaScript (Babel).sublime-syntax",
              "Packages/JavaScript/JavaScript.sublime-syntax"
            ]
          },
          {
            "languageId": "typescript",
            "scopes": ["source.ts"],
            "syntaxes": [
              "Packages/TypeScript-TmLanguage/TypeScript.tmLanguage",
              "Packages/TypeScript Syntax/TypeScript.tmLanguage"
            ]
          },
          {
            "languageId": "typescriptreact",
            "scopes": ["source.tsx"],
            "syntaxes": [
              "Packages/TypeScript-TmLanguage/TypeScriptReact.tmLanguage",
              "Packages/TypeScript Syntax/TypeScriptReact.tmLanguage"
            ]
          }
        ]
      }
    }
  }
}

如果您在此列表中没有看到自己喜欢的IDE，则可以开发一个扩展。我们的社区Discord小组可以为您提供入门指南。