Compiler Pro

一个 VSCode 扩展，用于编译 Vue 单文件组件，支持：

• 将 Vue 文件编译为 .vue.js 文件（JavaScript 部分）
• 从 Vue 文件中提取 Less 样式并编译为 .less.css 文件

功能特性

• ✅ 自动监听 .vue 文件保存事件并编译
• ✅ 支持 flc.json 配置文件
• ✅ 支持代码压缩（Terser）
• ✅ 支持 Less 样式编译
• ✅ 可配置输出目录（JS 和 CSS 分别配置）
• ✅ 支持 px 转 rem 功能（可配置转换比例，大写 PX 不转换）

安装

1. 克隆或下载此扩展
2. 在扩展目录运行 npm install
3. 运行 npm run compile 编译 TypeScript
4. 按 F5 在扩展开发宿主中运行，或使用 vsce package 打包安装

配置

配置文件位置

flc.json 配置文件应该放在与 .vue 文件同目录下。

例如：

template/
  ├── demo.vue
  └── flc.json  ← 配置文件

配置示例

{
    "compile": true,
    "out": "./js",
    "cssOut": "./css",
    "minify": true,
    "minifyOptions": {},
    "pxToRem": false,
    "pxToRemRatio": 100
}

配置说明

• compile: 是否启用编译（默认: true）
• out: JavaScript 输出目录（相对于 Vue 文件所在目录，默认: ./js）
• cssOut: CSS 输出目录（相对于 Vue 文件所在目录，默认: ./css）
• minify: 是否压缩代码（默认: true）
• minifyOptions: Terser 压缩选项
• pxToRem: 是否将 px 转为 rem（默认: false）
• pxToRemRatio: px 转 rem 的比例，默认 100（即 100px = 1rem）。注意：大写的 PX 不会转换，保持原样

默认配置

如果没有 flc.json 配置文件，扩展会使用以下默认配置：

{
    "compile": true,
    "out": "./js",
    "cssOut": "./css",
    "minify": true,
    "minifyOptions": {},
    "pxToRem": false,
    "pxToRemRatio": 100
}

这意味着编译后的文件会生成在与 Vue 文件同目录下的 js 和 css 文件夹中。

使用示例

Vue 文件结构

<template>
    <div class="demo">Hello World</div>
</template>

<script>
export default {
    name: "demo",
    data() {
        return {
            message: "Hello"
        }
    }
}
</script>

<style lang="less">
.demo {
    color: red;
    background: #f60;
    
    &:hover {
        opacity: 0.8;
    }
}
</style>

编译结果

保存 demo.vue 后，会自动生成：

• ./js/demo.vue.js - 编译后的 JavaScript 组件（如果使用默认配置）
• ./css/demo.vue.css - 编译后的 CSS 样式（如果使用默认配置）

如果配置了 flc.json，则按照配置的路径生成。

开发

# 安装依赖
npm install

# 编译 TypeScript
npm run compile

# 监听模式编译
npm run watch

# 打包扩展
npm run package

依赖

• vue-template-compiler: Vue 2.x 模板编译器
• less: Less 样式编译器
• terser: JavaScript 压缩工具

许可证

MIT