Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>foeNew to Visual Studio Code? Get it now.
foe

foe

Mora Qiu

|
383 installs
| (0) | Free
foe vscode plugin
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

foe-vscode README

功能

样式文件和 markdown 文件中路径自动补全

  • 输入成对的引号 "" 才会触发
  • 引号开头输入 . 触发相对路径补全,输入 / 触发绝对路径补全
  • 引号开头输入空格 触发使用配置的 resolveRoots 路径来补全,补全后删除开头的空格

文件路径点击可打开对应的文件

  • 包括这么几类文件的路径

    • 样式文件中引号中的路径
    • 样式文件中 () 中的路径
    • markdown 文件中引号中的路径
    • markdown 文件 () 中的路径(改用 DefinitionProvider 实现)
    • 脚本文件中的 import "path/to/file.ext" 语句中的路径
    • 脚本文件中的 []() 中的路径(改用 DefinitionProvider 实现任何注释中的文件链接都可点)
  • 可以指定 resolveRoots 来配置引用根目录

react 中 className 自动补全

  • 自动获取当前文件 import 的样式文件,由此来得到所有 className,另外可以在配置文件中配置全局样式的文件
  • 支持配置 foe.globalStyleFiles 表示全局的样式文件

注意,只会解析脚本中 import 的样式文件,而不会解析样式中 import 的样式文件

支持 scss 中的 function/variable/mixin/extend 自动补全

  • 需要先设置 foe.scssImportableFiles 配置项,系统会自动获取这里指定文件中的所有的 function/variable/mixin/extend
  • 也可以设置 foe.json2scssVariableFiles 配置项,指定提供 scss variable 的 json 文件路径(json 文件内容不能压缩)
  • 在写 @include / @extend 之后再输入空格会触发 mixin 和 extend 的补全,补全后同时会自动导入对应的需要导入的文件
  • 在写 : 之后再输入空格会触发 function 和 variable 的补全,补全后同时会自动导入对应的需要导入的文件

scss 文件支持跳转到 function/variable/mixin/extend 定义的地方

  • 自动解析 import 的文件,在所有 import 的文件中查找相关定义
  • 另外也会在 foe.json2scssVariableFiles 配置项所指定的 json 文件路径中查找 scss variable 变量(json 文件内容不能压缩)

智能的 snippet

  • 输入 ; 并且当前行中 ; 之前都是空白字符,则可以触发 snippet (可以通过配置 foe.snippetTriggers 来指定符合你自己开发习惯的触发字符)
  • 如果文件后缀是 /\.(test|spec)\.[tj]sx?$/,可以触发 jest 和 js 的补全
  • 如果文件是 typescriptreact,可以触发 ts 中的 react 和 js 补全
  • 如果文件是 js 相关的文件,可以触发常用的 js 补全
vscode 插件中的 snippet 存在的问题
  • 不可以覆盖默认的 https://github.com/Microsoft/vscode/issues/10565
  • 第三方插件提供的代码风格可能和自己项目的不一致
  • 自动补全中总是出现大量 snippet,但其实此时并不需要

支持将 js/jsx/ts/tsx 中的 import 语句格式化和排序

  • 只支持单行的 import 写法(不支持多行)

js/jsx/ts/tsx/md 中的链接支持 DefinitionProvider,还可防止 broken (链接失效)

  • js/jsx/ts/tsx 中的链接需要在注释中才可能应用 DefinitionProvider,md 可以在任何位置

  • 支持 diagnostic broken 的链接,可以匹配指定行上的字段(只支持 []() 这种形式的结构)

TODO

  • [x] vscode 打开多项目时如何解决对每个项目配置全局样式 (参考官方文档 Adopting multi-root workspace APIS)
  • [ ] react className 自动补全会影响默认的 import {} 的补全, console.log 也取不到当前变量
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft