foe-vscode README
功能
样式文件和 markdown 文件中路径自动补全
- 输入成对的引号
"" 才会触发
- 引号开头输入
. 触发相对路径补全,输入 / 触发绝对路径补全
- 引号开头输入空格
触发使用配置的 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 存在的问题
支持将 js/jsx/ts/tsx 中的 import 语句格式化和排序
js/jsx/ts/tsx/md 中的链接支持 DefinitionProvider,还可防止 broken (链接失效)
TODO
| |