PhpStorm + JSCS + TWIG with JavaScript. JSCS doesn't work - twig

JSCS is installed correctly and I have tested it with a .js file.
When I am editing a .html.twig or .js.twig JSCS doesn't kick in.
PhpStorm detects that it's a HTML and JS file.
Is it possible for JSCS to work in PhpStorm when editing twig files?
Thanks

JSCS supports --extract option that allows linting embedded javascript (http://jscs.info/overview). But:
only html format is supported (JavaScript inside <script> is checked)
PHPStorm doesn't currently support this option, as it doesn't work reliably (see https://youtrack.jetbrains.com/issue/WEB-19491#comment=27-1307471)

Related

How to make Sublime 3 open .js files with JSX syntax

I'm using Sublime 3 on MacOS 10.15.7 and I'm working on a React project.
I have a package installed for JSX syntax highlighting, and it works fine if I manually set it after opening the file. By default, it starts with JavaScript highlighting every time I open the files because my component files have .js extensions. (There are reasons for this.) Is there a way for me to configure Sublime to open these project files with JSX highlighting automatically? If it helps, I also use editorconfig.
NOTE: I don't want to force Sublime to globally open ANY js file as JSX because that will cause the reverse problem with all my Node.js / JavaScript projects. I need a solution that is project-specific.
Thanks in advance!
Sort of related to: Syntax specific settings in sublime-project settings file
Just go to:
View > Syntax > Open all with current extension as ... > JavaScript >
Then select JSX. It will open all JS as JSX, you can confirm it when you see the type of the file at the bottom right of the sublime window.
With further digging, I found this package which appears to enable this feature: https://github.com/reywood/sublime-project-specific-syntax
But I'd prefer a native solution, if possible.
You can use JSCustom package.
https://github.com/Thom1729/Sublime-JS-Custom
Open the command palette
Win/Linux: ctrl+shift+p, Mac: cmd+shift+p
Type Install Package Control, press enter and
search JSCustom
After installing JSCustom
choose: Preferences → Package Settings → JS Custom → Rebuild Syntaxes
Now reopen sublimeText. It will open any js file as JSX

NPM: edit es6 written plugin in node_modules dir without transpiling

I've got a plugin I wrote in es6, and I'm currently testing the plugin on a site that I'm building.
When there's an issue, I would like to quickly modify the plugin directly in the node_modules folder, however everytime I need to make a change, I need to rebuild the dist folder for that plugin using babel-cli.
Is there anyway to get around this? Is there a webpack solution for this?
Not sure if understand you correctly where do you execute this code, but any way if it is executed in node - node supports es, just use latest version. If it is browser - then again you have two options execute file without transcompiling it at all https://kangax.github.io/compat-table/es6/, or use babel directly in the browser: http://babeljs.io/docs/usage/browser/
Your problem derives from the use of a transpiler to transform your source code before loading it into the browser. You can avoid this by using an isomorphic module pattern like this example, with introductory article.
Another alternative that is webpack compatible is to use the webpack hot loader.

phpstorm Using swig Template Engine?

how to install or configure SWIG Template Engine in JetBrains PhpStorm 8.0.2?
I have:
"PhpStorm": 8.0.2
"node.js" v0.10.36
"express": 4.10.6
"swig": 1.4.2
How do I make swig template settings for my PhpStorm?
May be this will help: I added in Settings -> File Types -> Twig: *.html - and now works with HTML files as Twig files (Twig and Swig are the same in this context)
Update:
configured my swig files with extension *.s.html as Twig files, now I use Swig and HTML files without any issues.
WebStorm has no proper support for Django-like templates ATM.
https://youtrack.jetbrains.com/issue/WEB-7814 -- watch this ticket (star/vote/comment) to get notified on progress.

How to compile typescript without commenting out script tag in visual studio

I need some script tag like in the compiled JavaScript file. Is there any way I can compile typescript file with script tag? In visual studio 2012/2013, the typescript file can be compiled successfully after I comment out all the script tags.
I need some script tag like in the compiled JavaScript file. Is there any way I can compile typescript file with script tag?
You can use something like this : https://github.com/niutech/typescript-compile that lets you use TypeScript directly :
<script type="text/typescript">
...
</script>
But I highly recommend against it. You should compile the TS to JS and reference the JS with a script tag

keystoneJS won't run default css

So I have created a pretty default keystoneJS project and the first error that appeared was that when ran locally the website's default css won't load.
It's looking for site.min.css but in the folder there is only site.scss
After I compiled the scss via sublime text 2 sublimeBuild and renamed the file to site.min.css (from site.css) it ran perfectly but what worries me is why does the default installation have this error.
Where should I change this? Is there an scss builder included so I have to change folder naming or is there some other issue?
My guess is that it has something to do with some step skipped. I remember the keystone installation asked me whether I wanted to use sass so I suppose everything should be ok.
Is the problem because I did not use grunt somehow?
I recall reading somewhere that this grunt tool has to be used instead of node when running a server and I see a Gruntfile in my folder but when installed grunt-cli the grunt just loads and terminates the server right after that.
You don't have to do anything, sass-middleware is included and automatically generates CSS files from your SASS source files when they're requested.
The issue you were experiencing with site.min.css not being found was an error in the yeoman generator, from when the SASS support was added. The LESS middleware automatically compresses generated CSS when a request is made for a file ending in .min.css, but the SASS middleware doesn't do the same, so the request was 404'ing.
The problem with the yeoman generator has been fixed as of version 0.2.9, for existing projects the simple fix is to change your layout file so it refers to site.css instead of site.min.css.
Once you do that the middleware will automatically detect the presence of site.scss and generate an up-to-date version of site.css for you.

Resources