Sublime Plugin supports SASS compilation and Babel parsing ES6 &. sublime-build file

With sublime text quite a long time, the configuration with to match, each time to change the computer has to re-match, but the old brain is not used, you have to tidy up some, the next time to change the computer will have a reference.

Colleagues said that his webstorm is simply too convenient to integrate a lot of convenient tools, without configuring too much

haha but I still prefer to use St

If you want to compile sass into a CSS file, install the appropriate compilation tools, and then sass A.scss:b.css compile directly on the command line.

To parse the ES6 into a ES5 syntax, the same Babel tool is installed, and the command line executes Babel A.js-o b.js

But always to open the command line to manually command, a little trouble, you can use the corresponding watch parameter to listen to the file changes, instant compilation

But the better solution seems to be: no additional cmd command line to open, directly and immediately in the editor/ide to parse the compilation

By plane:Sass Support Babel support sublime-build other tips

First, SASS support

For St to support Sass, the first step should be to support the Sass syntax, Ctrl+shift+p--and install-to-Sass Sass Plugins

The first one is support for syntax rendering, and the following is Sass Build . Also installed, used to compile into CSS

(In fact, sass build plug-in implementation is not difficult, the following will be slightly introduced, to achieve the first condition is that the machine itself has been equipped with the SASS environment, plug-ins do just call)

After installing this plug-in, save the Scss file, press the shortcut key ctrl+b to compile it into a CSS file, the default path is the current directory

Looking at the build System under Tools, you can find two more build configurations, which are provided for the Sass Build tool, the first one to simply compile, and the second to compress after compilation

If you want to select the following, you can manually tick, or you want to compile by pressing the shortcut key ctrl+shift+b selection options can be

The default is that the CSS file is parsed into the current directory, and we can customize the path or file name

Click Create a new Build Systemand put this configuration

{    "cmd": ["Sass", "--update", "${file_base_name}.scss:./css/${file_base_name}.css", "--style", " Expanded "],    " selector ":" Source.sass, Source.scss ",    " Line_regex ":" Line ([0-9]+): ",     "Windows":    {        "shell": "True"    }}

CMD is a combination of commands and parameters, similar to the general Sass compiler command, by using some built-in variables, we can customize the CSS file generation path and file name

Very good, can be well compiled in the St editor, but also missing something. You must manually press the shortcut key to compile the file after saving it now.

Add a plugin Sublimeonsavebuild that provides support for save-as-you-execute commands

After you install the plugin, it is a good idea to restart St, and then save the file, you can follow the configuration in your build system to execute the commands in the configuration.

Can look at its configuration information

{    "filename_filter": "\ \." ( CSS|JS|SASS|LESS|SCSS) $ ",    " Build_on_save ": 1}

Define some files to listen, if you do not want to save the build, set the value to 0 (note that the author set the default option to read-only , you want to change the override in the User Configuration item )

second, Babel support

Generally use the Babel decoder to parse the ES6 syntax into ES5 syntax, add a plugin babel-sublime in the St editor to support Babel

This plugin first recognizes the syntax of ES6 or JSX for rendering, followed by a special recommendation to use this theme plugin for better code coloring

In addition, it provides Babel transcoding, but this feature has some drawbacks . First look at its configuration items

Note that the path here is set to the path of the environment variable, allowing the plugin to search for Babel or Babel-core commands at a time, otherwise the error will be couldn ' t find Babel or Babel-core

Then, like the premise of executing the babel command on the command line: first configure the. babelrc file in the current directory, define the transcoding rules, and place a dependency package in the current directory (because the global is not found here)

For example, I used three rules, just under the current path NPM loaded babel-preset-es2015,babel-preset-react,babel-preset-stage-3

{    "presets": [        "es2015",        "React",        "stage-3"    ],     "Plugins": []}

Then under Es6.js shortcut key ctrl+shift+p, enter Babel, select Babel transform execute can

If it goes well, you can see that the Es6 file has been converted to the ES5 syntax, however, only anonymous files are generated, which do not meet our expectations

I have been looking for a long time, never know where to set the path of the generated file, so this is a big flaw, besides, we have to make another command.

So, configure the build option yourself, like sass.

Note that our goal: to be smart, save in the Scss file immediately compiled into a CSS file, in the ES6 grammar file saved immediately parse into ES5 syntax format

Third, Sublime-build

So let's take a good look at Sublime-build's documentation .

Here, the first priority is to focus on three configurations.

1. cmd seems to have been mentioned above, in fact, is the general command splicing

2. selector can be used to intelligently filter, that is, to execute the build rule in a matching file

The premise is that automatic matching rules are turned on, i.e.

As mentioned above for the Sass build configuration, match to only execute

"Selector": "Source.sass, Source.scss",

To parse the ES6 syntax, now create a new build option, enter the contents, save the . sublime-build file to the appropriate directory

{    "cmd": ["Babel", "${file_base_name}.js", "-O", "./es5/${file_base_name}.js"]    ," Selector ":" Source.js ",    " Line_regex ":" Line ([0-9]+): ",    " Windows ":    {         "Shell": "True"    }}

For example, in this case, matching the *.js file to execute the command in CMD, the command has customized the path and file name, the rule is similar to the General Babel command rule

Save under Scss file and save under JS file, the trigger build command is different

If you only want to trigger the build rule when both files are saved, configure it in the Sublimeonsavebuild configuration

"Filename_filter": "\ \." (CSS|JS|SASS|LESS|SCSS) $ ",

3. variants

That is, with this configuration, we can define different commands in a build option, which we can choose at the time of construction, such as when I join such a variants configuration

{    "cmd": ["Babel", "${file_base_name}.js", "-O", "./es5/${file_base_name}.js"]    ," Selector ":" Source.js ",    " Line_regex ":" Line ([0-9]+): ",    " Windows ":    {         "Shell": "True"    }    ,    "variants": [        {            "name": "One",            "cmd": ["echo", "one"],            true        },        {            "name": "One",             "cmd": ["echo", "both"]        }    ]}

Save in the *.js file, there will be three command options, select the command name two, you can output two

About Sublime The build system is simply introduced here, more still go to the document center to see better

Iv. Other

Incidentally, if you want to install the St plugin in an intranet or offline environment, manually transfer the plug-in package to

Windows is typically under this path of the system:C:\Users\Administrator\AppData\Roaming\Sublime Text 3\installed Packages

This suffix of the file is the plug-in package, put it into the corresponding installed packages directory can be

And the configuration information of the plug-in is generally in this packages directory

For example, if you want to install the template plugin Sublimetmpl , the shortcut key ctrl+alt+h/c/j/p can create a new html/css/javascript/php template file directly

If you want to change the template file, you can go to directory changes

In addition, the Preferences under the ST's package Settings also provides a plug-in configuration for the portal

For Webstorm, to support ES6 syntax, you need to save the Preferences > Languages & Frameworks > JavaScript configuration version

Click Add Watch directly or create a new listener rule via Preferences > Tools > File watchers , and use Babel for instant parsing syntax

Customize the settings to save the corresponding items.

As you can see, WS is also called the Babel tool of the machine itself, invoking the command line execution. The configuration of St is similar to this one.

Sublime Plugin supports SASS compilation and Babel parsing ES6 &. sublime-build file