I wanna use emmet-vim on ejs files, my .vimrc config is
let g:user_emmet_install_global = 0
autocmd FileType html,css,ejs EmmetInstall
" redefine trigger key
let g:user_emmet_leader_key=','
let g:user_emmet_settings = {
\ 'php' : {
\ 'extends' : 'html',
\ 'filters' : 'c',
\ },
\ 'xml' : {
\ 'extends' : 'html',
\ },
\ 'haml' : {
\ 'extends' : 'html',
\ },
\ 'ejs' : {
\ 'extends' : 'html',
\ }}
yet it couldn't work, can anyone help?
P.S. my emmet-vim functions normally on html and css files
Maybe you can try it in this way with web-api
let g:user_emmet_settings = webapi#json#decode(join(readfile(expand('~/.snippets_custom.json')), "\n"))
Reference: emment-vim
Related
I have this simple Node.js library:
mylib/
|- inc.js
|- index.js
|- is_number.js
|- package.json
mylib/is_number.js
module.exports = x => typeof x === 'number';
mylib/inc.js
const is_number = require('./is_number');
module.exports = x => is_number(x) ? x + 1 : x;
mylib/index.js (value of the main property in my package.json)
module.exports = {
inc: require('./inc'),
utils: {
is_number: require('./is_number')
}
};
Example:
const mylib = require('mylib');
mylib.inc(41);
//=> 42
mylib.utils.is_number(42);
//=> true
How can I use the Google Closure Compiler to "browserify" my Node.js library so that it can work in a browser too? e.g.,
<script src="mylib/browser.min.js"></script>
<script>
const mylib = window.mylib;
mylib.inc(41);
//=> 42
mylib.utils.is_number(42);
//=> true
</script>
The canonical post for this answer is this Gist.
TL; DR
Create mylib/index_browser.js
window.mylib = {
inc: require('./inc'),
utils: {
is_number: require('./is_number')
}
};
Create mylib/externs.js
/** #externs */
var mylib;
var inc;
var utils;
var is_number;
Then:
$ cc --compilation_level ADVANCED \
--language_out ES5 \
--process_common_js_modules \
--module_resolution NODE \
--externs mylib/externs.js \
--isolation_mode IIFE \
--js mylib/index_browser.js mylib/inc.js mylib/is_number.js \
--js_output_file mylib/browser.min.js
Where cc is an alias to your Google Closure Compiler instance; see below for an example
Before we start:
I wrote this alias to make it easier to invoke the Google Closure Compiler (CC)
$ alias cc="java -jar /devtools/closure-compiler/compiler.jar"
$ cc --version
Closure Compiler (http://github.com/google/closure-compiler)
Version: v20210106
The browserified version of the library will be compiled down to ES5.
Step-by-step instructions
Your first attempt might look like this: just compile the exports file mylib/index.js
$ cc --compilation_level ADVANCED \
--language_out ES5 \
--js mylib/index.js
mylib/index.js:1:0: ERROR - [JSC_UNDEFINED_VARIABLE] variable module is undeclared
1| module.exports = {
^^^^^^
mylib/index.js:2:7: ERROR - [JSC_UNDEFINED_VARIABLE] variable require is undeclared
2| inc: require('./inc'),
^^^^^^^
2 error(s), 0 warning(s)
If CC doesn't know about module and require that's not a great start.
Fortunately we're only missing the --process_common_js_modules flag:
$ cc --compilation_level ADVANCED \
--language_out ES5 \
--process_common_js_modules \
--js mylib/index.js
mylib/index.js:2:7: ERROR - [JSC_JS_MODULE_LOAD_WARNING] Failed to load module "./inc"
2| inc: require('./inc'),
^
mylib/index.js:4:15: ERROR - [JSC_JS_MODULE_LOAD_WARNING] Failed to load module "./is_number"
4| is_number: require('./is_number')
^
2 error(s), 0 warning(s)
Still not great but this time the errors are different:
CC doesn't know which require you're talking about
CC doesn't know where these two other modules are
We need the --module_resolution flag and tell CC where the other modules are:
$ cc --compilation_level ADVANCED \
--language_out ES5 \
--process_common_js_modules \
--module_resolution NODE \
--js mylib/index.js mylib/inc.js mylib/is_number.js
However the output is empty...
Why? In ADVANCED compilation mode CC removes any code that is not used. Which is the case actually: so far all this stuff isn't used at all!
Let's check with a less aggressive compilation mode:
$ cc --compilation_level WHITESPACE_ONLY --formatting PRETTY_PRINT \
--language_out ES5 \
--process_common_js_modules \
--module_resolution NODE \
--js mylib/index.js mylib/inc.js mylib/is_number.js
var module$mylib$index = {default:{}};
module$mylib$index.default.inc = module$mylib$inc.default;
module$mylib$index.default.utils = {is_number:module$mylib$is_number.default};
var module$mylib$inc = {};
var is_number$$module$mylib$inc = module$mylib$is_number.default;
module$mylib$inc.default = function(x) {
return (0,module$mylib$is_number.default)(x) ? x + 1 : x;
};
var module$mylib$is_number = {};
module$mylib$is_number.default = function(x) {
return typeof x === "number";
};
We can see that even if the ADVANCED compilation mode didn't remove everything, this wouldn't be very useful anyway. Where is window.mylib for example?
The only way I managed to get both my library available at window.mylib and compiled with the most aggressive compilation mode, is to have a separate exports file for the browser.
From this mylib/index.js
module.exports = {
inc: require('./inc'),
utils: {
is_number: require('./is_number')
}
};
To this mylib/index_browser.js
window.mylib = {
inc: require('./inc'),
utils: {
is_number: require('./is_number')
}
};
When you add to the window object CC knows that this code may be reached so it can't safely remove it anymore.
Let's try again with this file:
$ cc --compilation_level ADVANCED --formatting PRETTY_PRINT \
--language_out ES5 \
--process_common_js_modules \
--module_resolution NODE \
--js mylib/index_browser.js mylib/inc.js mylib/is_number.js
function b(a) {
return "number" === typeof a;
}
;window.g = {h:function(a) {
return b(a) ? a + 1 : a;
}, j:{i:b}};
That is looking better but there is a major problem: CC has mangled all the names!
Don't worry! We only need to tell which names CC should leave alone. That is the purpose of an externs file.
mylib/externs.js
/** #externs */
var foo;
var inc;
var utils;
var is_number;
We need another flag: --externs
$ cc --compilation_level ADVANCED --formatting PRETTY_PRINT \
--language_out ES5 \
--process_common_js_modules \
--module_resolution NODE \
--externs mylib/externs.js \
--js mylib/index_browser.js mylib/inc.js mylib/is_number.js
function b(a) {
return "number" === typeof a;
}
;window.mylib = {inc:function(a) {
return b(a) ? a + 1 : a;
}, utils:{is_number:b}};
Getting there...
One obvious improvement is to wrap all of this in an IIFE to avoid polluting the global scope more than necessary.
We need the --isolation_mode flag:
$ cc --compilation_level ADVANCED --formatting PRETTY_PRINT \
--language_out ES5 \
--process_common_js_modules \
--module_resolution NODE \
--externs mylib/externs.js \
--isolation_mode IIFE \
--js mylib/index_browser.js mylib/inc.js mylib/is_number.js
(function(){function b(a) {
return "number" === typeof a;
}
;window.mylib = {inc:function(a) {
return b(a) ? a + 1 : a;
}, utils:{is_number:b}};
}).call(this);
Fantastic!
All that is left to do is save that into a file and remove the formatting to save up a few extra bytes:
$ cc --compilation_level ADVANCED \
--language_out ES5 \
--process_common_js_modules \
--module_resolution NODE \
--externs mylib/externs.js \
--isolation_mode IIFE \
--js mylib/index_browser.js mylib/inc.js mylib/is_number.js \
--js_output_file mylib/browser.min.js
mylib/browser.min.js
(function(){function b(a){return"number"===typeof a};window.mylib={inc:function(a){return b(a)?a+1:a},utils:{is_number:b}};}).call(this);
I want to use vim-easytags for javascript, so that it can use jsctags to generate tags each time I save my code. From the documentation of vim-easytags, I notice it supports javascript tags and jsctags. But how to set the configuration struggled me. Can anyone help me fix my .vimrc?
let g:easytags_python_enabled=1
let g:easytags_events = ['BufWritePost']
let b:easytags_auto_highlight = 1
let g:easytags_async=1
let g:easytags_by_filetype=1
let g:easytags_languages = {
\ 'javascript': {
\ 'cmd': 'jsctags',
\ 'args': ['-f'],
\ 'fileoutput_opt': '-f',
\ 'stdout_opt': '-f-',
\ 'recurse_flag': '-R'
\ }
\}
This seems to do it for me:
let g:easytags_languages = {
\ 'javascript': {
\ 'cmd': 'jsctags',
\ 'recurse_flag': ''
\ }
\}
I need to add new rules to .htaccess or to add the code to index.php of YII2?
My site is on shared hosting.
I want to compress only .css and .js files. I don't want to compress all responses.
You can make it work by attaching event handler on yii\web\Response in index.php.
$application = new yii\web\Application($config);
$application->on(yii\web\Application::EVENT_BEFORE_REQUEST, function(yii\base\Event $event){
$event->sender->response->on(yii\web\Response::EVENT_BEFORE_SEND, function($e){
ob_start("ob_gzhandler");
});
$event->sender->response->on(yii\web\Response::EVENT_AFTER_SEND, function($e){
ob_end_flush();
});
});
$application->run();
I added the following rules to .htaccess:
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE "application/atom+xml" \
"application/javascript" \
"application/json" \
"application/ld+json" \
"application/manifest+json" \
"application/rdf+xml" \
"application/rss+xml" \
"application/schema+json" \
"application/vnd.geo+json" \
"application/vnd.ms-fontobject" \
"application/x-font-ttf" \
"application/x-javascript" \
"application/x-web-app-manifest+json" \
"application/xhtml+xml" \
"application/xml" \
"font/eot" \
"font/opentype" \
"image/bmp" \
"image/svg+xml" \
"image/vnd.microsoft.icon" \
"image/x-icon" \
"text/cache-manifest" \
"text/css" \
"text/html" \
"text/javascript" \
"text/plain" \
"text/vcard" \
"text/vnd.rim.location.xloc" \
"text/vtt" \
"text/x-component" \
"text/x-cross-domain-policy" \
"text/xml"
</IfModule>
Configuration list: https://github.com/h5bp/server-configs
I am working on SUSE Linux Enterprise Desktop 11 (x86_64) and I am using Vim in terminal as my editor. I have recently installed a plugin called lightline from https://github.com/itchyny/lightline.vim. The plugin uses special characters to make the status line look like this:
The > part of the bar is actually ► character coloured like the square next to it. The problem is that the bar, in my case, looks like this:
The ► character is not displayed properly, although the encoding is set to UTF-8 and all the required fonts are installed on the system (fonts for powerline). In this case the font set on terminal is Liberation Mono for Powerline.
Lightline settings in my vimrc:
set encoding=utf-8
scriptencoding utf-8
let g:lightline = {
\ 'colorscheme': 'wombat',
\ 'separator': {'left': "\u25B6", 'right': ''},
\ 'subseparator': { 'left': '', 'right': ''}
\ }
I also tried copying the ► character like this
let g:lightline = {
\ 'colorscheme': 'wombat',
\ 'separator': {'left': "►", 'right': ''},
\ 'subseparator': { 'left': '', 'right': ''}
\ }
But it manifests in the same way.
Furthermore, there is a problem with ^ characters wherever there is supposed to be whitespace.
Is there any solution for this?
Following is my my_configs.vim for lightline, it works perfectly in my Fedora 26 system.
let g:lightline = {
\ 'colorscheme': 'wombat',
\ }
let g:lightline = {
\ 'colorscheme': 'wombat',
\ 'active': {
\ 'left': [ ['mode', 'paste'],
\ ['fugitive', 'readonly', 'filename', 'modified'] ],
\ 'right': [ [ 'lineinfo' ], ['percent'] ]
\ },
\ 'component': {
\ 'readonly': '%{&filetype=="help"?"":&readonly?"\ue0a2":""}',
\ 'modified': '%{&filetype=="help"?"":&modified?"\ue0a0":&modifiable?"":"-"}',
\ 'fugitive': '%{exists("*fugitive#head")?fugitive#head():""}'
\ },
\ 'component_visible_condition': {
\ 'readonly': '(&filetype!="help"&& &readonly)',
\ 'modified': '(&filetype!="help"&&(&modified||!&modifiable))',
\ 'fugitive': '(exists("*fugitive#head") && ""!=fugitive#head())'
\ },
\ 'separator': { 'left': "\ue0b0", 'right': "\ue0b2" },
\ 'subseparator': { 'left': "\ue0b1", 'right': "\ue0b3" }
\ } "" This is comment: I fotgot this line in my last post, just added
Sorry for my mistake, I just fixed this config.
If you installed hack font from https://github.com/chrissimpkins/Hack/releases
and install powerline-fonts by command "sudo dnf install powerline-fonts" in Fedora 26 system, you probably want to add the following configs to your
/etc/fonts/local.conf
<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
<alias>
<family>Hack</family>
<prefer>
<family>PowerlineSymbols</family>
</prefer>
</alias>
</fontconfig>
The problem was explained in this thread stackoverflow.com/questions/7223309/. It says that if the stl and stlnc have the same values, they will be replaced with ^^^. It works when you put * for stlnc and whitespace for stl.
When I'm editing html and xhtml files in MacVim, sometimes I need to comment embedded css styles, so when I try to switch to the alternative set of delimiters ( ca ), the plugin warns me with:
NERDCommenter:cannot use alternative delimiters, none are specified
My question is:
how can I specify these alternative delimiters?
These can be specified in the config variable g:NERDCustomDelimiters (before the plugin is sourced, e.g. in your ~/.vimrc):
:let g:NERDCustomDelimiters = {
\ 'html': { 'left': '<!-- ', 'right': '-->', 'leftAlt': '/*', 'rightAlt': '*/' }
\ }
Added these lines to my .vimrc :
let g:NERDCustomDelimiters = {
\ 'html': { 'left': '<!-- ', 'right': '-->', 'leftAlt': '/*','rightAlt': '*/' },
\ 'xhtml': { 'left': '<!-- ', 'right': '-->', 'leftAlt': '/*','rightAlt': '*/'},
\}
let NERD_html_alt_style=1
NOTE: Don't forget about the commas after the curly braces!! :)