I am trying to get chrome to use source maps so I can walk through my coffeescript not the transpiled javascript.
Using WebStorm 7, I have added a CoffeeScript Source Map File Watcher, like so:
Now whenever I make a change to a coffeescript file I see the following error:
Can you tell me the correct way to generate source maps for my coffeescript files so I can step through the coffeescript rather than the transpiled javascript.
Thanks
please remove the second watcher (CoffeeScript Source map) and edit the first one as follows:
Program: C:\Users\janderson\AppData\Roaming\npm\coffee.cmd
Arguments: --compile --map $FileName$
Working directory: $FileDir$
Output paths to refresh: $FileNameWithoutExtension$.js:$FileNameWithoutExtension$.map
Related
I'm working on an old erlang code that uses Makefiles to compile.
The makefile defines some "include" paths:
# Erlang include directories.
HRL_INCLUDE_DIRS = \
../include
My module imports modules from that path and uses it:
-include("logger.hrl").
VS Code doesn't seem to find this file (red squiggly line under the include statement and function calls.), because logger should have relative or absolute path.
The Makefile does the magic behind the scenes but VS Code doesn't read it.
How to configure VS Code to read the makefile?
The question is where the red squiggly line is coming from. Are you using the erlang-ls extension? If so, you probably need to configure include_dirs in an erlang_ls.config file in the root of your project.
include_dirs:
- "path/to/include"
I'm using Live Sass Compiler v3.0.0 in my VS Code and it throws a compilation error whenever I use the #use rule to import variables from another file. However, when I use the Sass command line interface (sass --watch) to compile my files, it throws no errors.
Therefore, I want to ask is this caused by a syntax error in my code or a bug of Live Sass Compiler.
Steps to Reproduce
File Structure & Code
This is the file structure of the folder called sass-test that I opened in VS Code:
sass-test
| style.scss
| _variables.scss
style.scss
#use "variables";
html {
color: variables.$primaryColor;
}
_variables.scss
$primaryColor: #ff0000;
Live Sass Compiler Output
Open style.scss in a new tab in VS Code. Then, click the "Watch Sass" button located in the bottom right of the window. Live Sass Compiler would output the following error:
Compiling Sass/Scss Files:
d:\Web Development\sass-test\style.scss
--------------------
Compilation Error
Error: Invalid CSS after " color: variables": expected expression (e.g. 1px, bold), was ".$primaryColor;"
on line 4 of sass/d:\Web Development\sass-test\style.scss
>> color: variables.$primaryColor;
------------------^
--------------------
Watching...
-------------------
Sass CLI Output
Open Terminal and run sass --watch style.scss:style.css. The compiler successfully compiles without any errors:
Compiled style.scss to style.css.
Sass is watching for changes. Press Ctrl-C to stop.
Since my code can compile successfully with Sass CLI, does it mean that my code is syntactically correct and it's caused by a bug from the Live Sass Compiler extension?
I had same/similar problem two days ago.
#use is a new directive introduced in the new official Version 'Dart Sass' and replaces '#import' which is depricated now.
The popular Extension 'Live Sass Compiler' in VS Code is not longer supported by the maintainer for some time. So unfortunately the Sass Version is not updated in that extension...
In VS Code for 'Dart Sass' I found the the Extension 'DartJS Sass Compiler':
https://marketplace.visualstudio.com/items?itemName=codelios.dartsass
Actual I just did a quick testing so I cannot report much about it. But on the first glance it is running well. But as it is another extension you may have to change some settings.
UPDATE
Additional to the above reported exentsion DartJS Sass Compiler with actual SASS version I found an actualised and actual maintained fork of Live Sass Compiler. It has been deep hidden in the searching reuslts. As it is a very popular extension in VS Code here the link to the fork:
https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass
Remark:
I played arround with both extension. Both are doing the job well and have advantages.
'DartJS Sass Compiler' has the additional possibility for more detailed output like information about sass version and watchers. And additional to included SASS version it allows to use your own SASS version if installed to your system or locally to your project. So there is no/less dependency on updates by the maintainer.
'Live Sass Compiler' runs out of the box with included sass version. As it is a very popular extension in VS Code there is a special advantage: it seems it keeps your settings in the old projects running.
I think both are good solutions.
I have used protractor testing along with cucumberjs framework for a while. I've encountered this 'step definition not found' issue before but it was always a config quick fix until I am playing with this 'cukefarm' library at https://www.npmjs.com/package/cukefarm.
The 'cukefarm' use 'protractor-cucumber-framework' (https://github.com/protractor-cucumber-framework/protractor-cucumber-framework) which I also played before. So I start following 'cukefarm' readme page and start building a hello world project on top of it.
Here's what I know about running (protractor)/cucumberjs testing in a normal manner:
step definition is usually specified in format like below:
cucumberOpts:
{
// require step definitions
require: [
'path/to/step/definitions/**/*.steps.js'
]
}
cucumberjs will try to regex match feature file step with step definition specified in 'cucumberOpts', and if matched, step definition is found
I don't think the step definition .js file is compiled/syntx-checked first before usage. I tried to add some scrambled characters in the step definition .js file, but not in the function that's used by feature file, it does not stop test from running.
In my new project 'cukefarm_example', I did the following check:
I console log the generated 'cucumberOpts', it points to the correct step definition file path
"cucumberOpts": {
"require": [
"support/*.js",
"step_definitions/*.js"
],
I open the project in IDE that has cucumberjs plugin, and it shows a match between feature file step and step definition .js function
However, i am still getting step definition 'Undefined. Implement with the following snippet:' error.
Warnings:
1) Scenario: Add numbers # features/arithmetic.feature:6 ? Given
The calculator is open
Undefined. Implement with the following snippet:
Given('The calculator is open', function () {
// Write code here that turns the phrase above into concrete actions
return 'pending';
});
Is there a systematic way to examine or debug the cucumberjs loading process to see how it's doing the loading of step definition files and how it's finding the step definition .js based on the feature file step?
I am running out of ideas by just checking the configuration by eyes.
Does anything special have to be done to get Electron to run my main.coffee file? I have a main.js file (that works) that I converted to CoffeeScript (hence main.coffee), but when I run Electron main.coffee I get an error like the following:
App threw an error when running [SyntaxError: /Users/foo/develop/electron/main.coffee:13
app.on('window-all-closed', ->
^
Unexpected token >]
I can only assume this is a CoffeeScript issue, since when I commented the offending code with CoffeeScript's block comment (###), I got the following:
App threw an error when running [SyntaxError: /Users/foo/develop/electron/main.coffee:13
###
^
Unexpected token ILLEGAL]
I added coffee-script to my packages.json as a dependency, and made sure it was installed to my local node_modules directory like my other application dependencies, but that didn't seem to help.
I think, the main file main.js has to be javascript. But you can require a coffee file, for example application.coffee, from there using coffee-script.
main.js
// main.js
require('coffee-script').register();
require('./application')
application.coffee
# application.coffee
app = require('app')
BrowserWindow = require('browser-window')
# ...
Installing coffee-script
Include it in your package.json:
{
...
"devDependencies": {
"electron-prebuilt": "^0.33.1",
"coffee-script": "~1.10.0"
}
}
And run:
npm install
I've recently discovered that instead of transpiling to Javascript, you can do something like:
<script>
require('coffee-script').register();
require('../src/app/boot');
and then in src/app/boot.coffee you can use regular CoffeeScript :)
I found it in the app https://github.com/postcasio/hearthdash so there are more examples there.
There is no way to do it (atom doesn't ship with a coffeescript compiler), but you can use the watch option of coffeescript,
-w, --watch watch scripts for changes and rerun commands
For example:
coffee -w main.coffee in your case.
My developer friend who has the luxury of developing in a non-Windows environment has been raving about Compass. I finally decided I wanted to give it a try. I'm tired of trying to keep up with all of the intricacies of cross-browser CSS.
So, I found it on NuGet, and installed it.
I installs to my solutions root directory in the packages directory:
$(SolutionDir)packages\Ruby.Compass.0.12.2.3\
It comes with a Readme that states the following message:
Ruby Compass v. 0.12.2
Compass is installed in its own NuGet package dir, and available by
'compass' command in "packages\Ruby.Compass.0.12.2.3" folder.
To compile Compass files during build, add the next line to the
project pre-build events:
"$(SolutionDir)packages\Ruby.Compass.0.12.2.3\compass" compile
"$(ProjectDir)."
So, I placed the line in my pre-build events, saved, and tried to build my project. However, I get an error as follows:
The command
""$(SolutionDir)packages\Ruby.Compass.0.12.2.3\compass" compile "$(ProjectDir)."" exited with code 1.
Notice: It actually shows the full path to the ProjectDir and SolutionDir as it's supposed too in the error message. I replaced them with the tokens to keep the project name unanimous.
Let me mention that I tried variations of the suggestion pre-build line:
"$(SolutionDir)packages\Ruby.Compass.0.12.2.3\compass" compile "$(ProjectDir)"
"$(SolutionDir)packages\Ruby.Compass.0.12.2.3\compass" compile "$(ProjectDir)css"
"$(SolutionDir)packages\Ruby.Compass.0.12.2.3\compass" compile "$(ProjectDir)css\test.scss"
The first one just removed that trailing .. The second one pointed it to the directory where all my css files are stored. The third one pointed it to the exact file I was trying to compile was located.
I opened up compass.cmd which is the file it is calling, and it looks like the following:
#echo off
"%~dp0ruby\bin\compass" %*
I'm assuming this calls the compass file in the ruby/bin folder, which looks like this:
#!C:/downloads/ruby-2.0.0-p247-x64-mingw32/ruby-2.0.0-p247-x64-mingw32/bin/ruby.exe
#
# This file was generated by RubyGems.
#
# The application 'compass' is installed as part of a gem, and
# this file is here to facilitate running it.
#
require 'rubygems'
version = ">= 0"
if ARGV.first
str = ARGV.first
str = str.dup.force_encoding("BINARY") if str.respond_to? :force_encoding
if str =~ /\A_(.*)_\z/
version = $1
ARGV.shift
end
end
gem 'compass', version
load Gem.bin_path('compass', 'compass', version)
From there, I'm not sure what is going on. I'm not a Ruby person.
Is there an issue that I'm overlooking here?
Has anyone else been able to install Ruby.Compass via NuGet?
How can I get this working in Visual Studio without having to fight with Ruby?
From: http://codewith.us/automating-css-generation-in-visual-studio-using-sasscompass/
"Note that, if there are issues with your SCSS files, you will receive some variation of the error below.
Error 36 The command "del "C:Projectspubliccss*.css" /S
compass compile "C:Projectspublic" --force" exited with code 1.
Open your Output window (click View -> Output or press Ctrl+W, O), and select “Build” in the “Show output from:” menu. Scroll up until you find your command in the log and you should get a little more insight into what portion of the command failed."