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 也取不到当前变量