├── .vsixmanifest
├── CHANGELOG.md
├── README.md
├── images
    ├── code1.gif
    ├── code2.gif
    └── icon.jpg
├── out
    └── src
    │   ├── extension.js
    │   ├── process.js
    │   └── provider.js
├── package.json
└── px2rem-0.0.1.vsix


/.vsixmanifest:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <PackageManifest Version="2.0.0" xmlns="http://schemas.microsoft.com/developer/vsx-schema/2011" xmlns:d="http://schemas.microsoft.com/developer/vsx-schema-design/2011">
 3 |   <Metadata>
 4 |     <Identity Language="en-US" Id="cssrem" Version="0.0.3" Publisher="cipchk"/>
 5 |     <DisplayName>cssrem</DisplayName>
 6 |     <Description xml:space="preserve">一个CSS值转REM的VSCode插件</Description>
 7 |     <Tags>keybindings,html,vue,css,less,scss,sass,stylus</Tags>
 8 |     <Categories>Formatters,Snippets,Other</Categories>
 9 |     <GalleryFlags>Public</GalleryFlags>
10 |     <Badges></Badges>
11 |     <Properties>
12 |       <Property Id="Microsoft.VisualStudio.Code.Engine" Value="^1.12.0" />
13 |       <Property Id="Microsoft.VisualStudio.Code.ExtensionDependencies" Value="" />
14 |       
15 |         <Property Id="Microsoft.VisualStudio.Services.Links.Source" Value="https://github.com/cipchk/vscode-cssrem.git" />
16 |         <Property Id="Microsoft.VisualStudio.Services.Links.Getstarted" Value="https://github.com/cipchk/vscode-cssrem.git" />
17 |         
18 |           <Property Id="Microsoft.VisualStudio.Services.Links.GitHub" Value="https://github.com/cipchk/vscode-cssrem.git" />
19 |         
20 |       
21 |       <Property Id="Microsoft.VisualStudio.Services.Links.Support" Value="https://github.com/cipchk/vscode-cssrem/issues" />
22 |       <Property Id="Microsoft.VisualStudio.Services.Links.Learn" Value="https://github.com/cipchk/vscode-cssrem" />
23 |       
24 |       
25 |       <Property Id="Microsoft.VisualStudio.Services.GitHubFlavoredMarkdown" Value="true" />
26 |       
27 |       
28 |     </Properties>
29 |     <License>extension/LICENSE.txt</License>
30 |     <Icon>extension/icon.png</Icon>
31 |   </Metadata>
32 |   <Installation>
33 |     <InstallationTarget Id="Microsoft.VisualStudio.Code"/>
34 |   </Installation>
35 |   <Dependencies/>
36 |   <Assets>
37 |     <Asset Type="Microsoft.VisualStudio.Code.Manifest" Path="extension/package.json" Addressable="true" />
38 |     <Asset Type="Microsoft.VisualStudio.Services.Content.Details" Path="extension/README.md" Addressable="true" /><Asset Type="Microsoft.VisualStudio.Services.Content.Changelog" Path="extension/CHANGELOG.md" Addressable="true" /><Asset Type="Microsoft.VisualStudio.Services.Content.License" Path="extension/LICENSE.txt" Addressable="true" /><Asset Type="Microsoft.VisualStudio.Services.Icons.Default" Path="extension/icon.png" Addressable="true" />
39 |   </Assets>
40 | </PackageManifest>
41 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Saberization/vscode-px2rem/2a88d76173f7700dc659503c5bdb241255b468a5/CHANGELOG.md


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # px2rem
 2 | 
 3 | 一个CSS值转REM的VSCode插件
 4 | 
 5 | ![](https://ws1.sinaimg.cn/large/006d7zD3gy1fj1h61g2dug30gn075npf.jpg)
 6 | 
 7 | ![](https://ws1.sinaimg.cn/large/006d7zD3gy1fj1h1dh4yrg30go08qhdx.jpg)
 8 | 
 9 | # 下载
10 | 
11 | 已经上架：[marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=arturiapendragon.px2rem)
12 | 
13 | 或者在vscode扩展中直接搜索`px2rem`安装即可
14 | 
15 | 
16 | # 说明
17 | 
18 | px2rem：将px转换成rem的插件
19 | 
20 | # 支持语言
21 | 
22 | html vue css less scss sass stylus
23 | 
24 | # 配置
25 | 
26 | - `px2rem.rootFontSize` 根目录font-size，默认：16px
27 | - `px2rem.fixedDigits` rem保留小数位数，默认：6位。
28 | - `px2rem.autoRemovePrefixZero` 自动移除0开头的前缀，默认：true
29 | - `px2rem.isNeedNotes` 是否开启注释，默认：true


--------------------------------------------------------------------------------
/images/code1.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Saberization/vscode-px2rem/2a88d76173f7700dc659503c5bdb241255b468a5/images/code1.gif


--------------------------------------------------------------------------------
/images/code2.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Saberization/vscode-px2rem/2a88d76173f7700dc659503c5bdb241255b468a5/images/code2.gif


--------------------------------------------------------------------------------
/images/icon.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Saberization/vscode-px2rem/2a88d76173f7700dc659503c5bdb241255b468a5/images/icon.jpg


--------------------------------------------------------------------------------
/out/src/extension.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | Object.defineProperty(exports, "__esModule", {
 3 |     value: true
 4 | });
 5 | 
 6 | const vscode = require("vscode");
 7 | const processModule = require("./process");
 8 | const providerModule = require("./provider");
 9 | let options = null;
10 | 
11 | function activate(context) {
12 |     options = vscode.workspace.getConfiguration('px2rem');
13 |     
14 |     const process = new processModule.Px2remProcess(options);
15 |     let provider = new providerModule.Px2remProvider(process);
16 |     const LANS = ['html', 'vue', 'css', 'less', 'scss', 'sass', 'stylus'];
17 |     
18 |     for(let lan of LANS) {
19 |         let providerDisposable = vscode.languages.registerCompletionItemProvider(lan, provider);
20 |         context.subscriptions.push(providerDisposable);
21 |     }
22 |     
23 |     context.subscriptions.push(vscode.commands.registerTextEditorCommand('extension.px2rem', (textEditor, edit) => {
24 |         const doc = textEditor.document;
25 |         let selection = textEditor.selection;
26 |         
27 |         if(selection.isEmpty) {
28 |             const start = new vscode.Position(0, 0);
29 |             const end = new vscode.Position(doc.lineCount - 1, doc.lineAt(doc.lineCount - 1).text.length);
30 |             selection = new vscode.Range(start, end);
31 |         }
32 |         
33 |         let text = doc.getText(selection);
34 |         textEditor.edit(builder => {
35 |             builder.replace(selection, process.convertAll(text));
36 |         });
37 |         
38 |     }));
39 |     
40 | }
41 | exports.activate = activate;


--------------------------------------------------------------------------------
/out/src/process.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | Object.defineProperty(exports, "__esModule", {
 3 |     value: true
 4 | });
 5 | class Px2remProcess {
 6 |     constructor(options) {
 7 |         this.options = options;
 8 |         this.rePx = /([\d.]+)p(x)?/;
 9 |         this.rePxAll = /([\d.]+)px/g;
10 |     }
11 |     /**
12 |      * 换px转换成rem
13 |      *
14 |      * @private
15 |      * @param {string} pxStr
16 |      */
17 |     pxToRem(pxStr) {
18 |         const px = parseFloat(pxStr);
19 |         var remValue = +(px / this.options.rootFontSize).toFixed(this.options.fixedDigits);
20 |         if(this.options.autoRemovePrefixZero) {
21 |             if(remValue.toString().startsWith('0.')) {
22 |                 remValue = remValue.toString().substring(1);
23 |             }
24 |         }
25 |         
26 |         if(this.options.isNeedNotes) {
27 |             remValue = remValue + 'rem' + ' /* ' + px + '/' + this.options.rootFontSize + ' */';
28 |         }
29 |         
30 |         return {
31 |             px: pxStr,
32 |             pxValue: px,
33 |             remValue: remValue,
34 |             rem: remValue
35 |         };
36 |     }
37 |     /**
38 |      * px转rem
39 |      *
40 |      * @param {string} text 需要转换文本，例如：10px 12p
41 |      * @return {Object} { px: '10px', pxValue: 10, rem: '1rem', remValue: 1 }
42 |      */
43 |     convert(text) {
44 |         let match = text.match(this.rePx);
45 |         if(!match) {
46 |             return null;
47 |         }
48 | 
49 |         return this.pxToRem(match[1]);
50 |     }
51 |     /** 批量转换 */
52 |     convertAll(code) {
53 |         if(!code) {
54 |             return code;
55 |         }
56 |             
57 |         return code.replace(this.rePxAll, (word) => {
58 |             const res = this.pxToRem(word);
59 |             if(res) {
60 |                 return res.rem;
61 |             }
62 | 
63 |             return word;
64 |         });
65 |     }
66 | }
67 | exports.Px2remProcess = Px2remProcess;


--------------------------------------------------------------------------------
/out/src/provider.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | Object.defineProperty(exports, "__esModule", { value: true });
 3 | 
 4 | const vscode = require("vscode");
 5 | 
 6 | class Px2remProvider {
 7 |     
 8 |     constructor(process) {
 9 |         this.process = process;
10 |     }
11 |     
12 |     provideCompletionItems(document, position, token) {
13 |         return new Promise((resolve, reject) => {
14 |             const lineText = document.getText(new vscode.Range(position.with(undefined, 0), position));
15 |             const res = this.process.convert(lineText);
16 |             if (!res) {
17 |                 return resolve([]);
18 |             }
19 |             const item = new vscode.CompletionItem(`${res.pxValue}px -> ${res.rem}`, vscode.CompletionItemKind.Snippet);
20 |             item.insertText = res.rem;
21 |             return resolve([item]);
22 |         });
23 |     }
24 |     
25 | }
26 | exports.Px2remProvider = Px2remProvider;


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "px2rem",
 3 | 	"displayName": "px2rem",
 4 | 	"description": "px转换成rem的插件",
 5 | 	"version": "0.0.1",
 6 | 	"publisher": "arturiapendragon",
 7 | 	"icon": "images/icon.jpg",
 8 | 	"license": "MIT",
 9 | 	"licenseUrl": "LICENSE",
10 | 	"engines": {
11 | 		"vscode": "^1.12.0"
12 | 	},
13 | 	"categories": [
14 | 		"Formatters",
15 | 		"Snippets",
16 | 		"Other"
17 | 	],
18 | 	"activationEvents": [
19 | 		"onLanguage:html",
20 | 		"onLanguage:vue",
21 | 		"onLanguage:css",
22 | 		"onLanguage:less",
23 | 		"onLanguage:scss",
24 | 		"onLanguage:sass",
25 | 		"onLanguage:stylus"
26 | 	],
27 | 	"main": "./out/src/extension",
28 | 	"contributes": {
29 | 		"commands": [
30 | 			{
31 | 				"command": "extension.px2rem",
32 | 				"title": "px2rem"
33 | 			}
34 | 		],
35 | 		"configuration": {
36 | 			"type": "object",
37 | 			"title": "px2rem 配置",
38 | 			"properties": {
39 | 				"px2rem.rootFontSize": {
40 | 					"type": "number",
41 | 					"default": 16,
42 | 					"description": "根目录font-size，默认：16px"
43 | 				},
44 | 				"px2rem.fixedDigits": {
45 | 					"type": "number",
46 | 					"default": 6,
47 | 					"description": "rem保留小数位数，默认：6位。"
48 | 				},
49 | 				"px2rem.autoRemovePrefixZero": {
50 | 					"type": "boolean",
51 | 					"default": true,
52 | 					"description": "自动移除0开头的前缀，默认：true"
53 | 				},
54 | 				"px2rem.isNeedNotes": {
55 | 				    "type": "boolean",
56 | 				    "default": true,
57 | 				    "description": "是否需要开启注释，默认：true"
58 | 				}
59 | 			}
60 | 		}
61 | 	},
62 | 	"devDependencies": {
63 | 		"typescript": "^2.0.3",
64 | 		"vscode": "^1.0.0",
65 | 		"mocha": "^2.3.3",
66 | 		"@types/node": "^6.0.40",
67 | 		"@types/mocha": "^2.2.32"
68 | 	}
69 | }


--------------------------------------------------------------------------------
/px2rem-0.0.1.vsix:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Saberization/vscode-px2rem/2a88d76173f7700dc659503c5bdb241255b468a5/px2rem-0.0.1.vsix


--------------------------------------------------------------------------------