Live Sass compiler does not compile list operations - visual-studio-code

I have an issue with the Live Sass compiler in VS Code, namely when working with lists. None of the usual operations work. In the following example, it's list.nth(list,index).
The following works fine in a Codepen:
HTML
<p>red</p>
<p>blue</p>
<p>green</p>
SCSS
#use "sass:list";
p {
font-size: 25x;
font-weight: bold;
}
$colors: red blue green;
#for $n from 1 through 3 {
p:nth-child(#{$n}) {
color: list.nth($colors,$n);
}
}
This also works fine when compiling it locally with the Dart Sass CLI.
But when I try to compile this with the Live Sass compiler in VS Code, I get the following error:
Compilation Error
Error: Invalid CSS after "... color: list": expected expression (e.g. 1px, bold), was ".nth($colors, $n);"
Why is that?

Use Live Sass Compiler by Glenn Marks
I had exactly the same problem. You read the SASS official website, follow the instructions, write the code in Visual Studio Code, and then you get this strange Compilation Error when saving the SASS or SCSS file. You double-check everything and it seems like it should work, but it doesn't.
Well, the problem is caused by the Visual Studio Code extension you are using for compiling SASS or SCSS files to CSS files.
Don't use this extension: Live Sass Compiler by Ritwick Dey
You are probably using this extension: Live Sass Compiler by Ritwick Dey. It's widely used, but is no longer supported by the author. Consequently, the SASS version isn't updated. This extension produces the error you are describing.
Use this extension: Live Sass Compiler by Glenn Marks
You should use this extension: Live Sass Compiler by Glenn Marks. As the author states: A big thank you to #ritwickdey for all his work. However, as they are no longer maintaining the original work, I have released my own which has been built upon it. This extension compiles your SASS or SCSS files to CSS files successfully.

The extension you are using does not seem to be maintained anymore, you can try to use this one instead.

Related

A constructor from a node module I'm importing works when using Create React App, but errors in ParcelJS. What is going on?

I'm converting a project that was built using Create React App to use ParcelJS as a bundler instead. Strangely, a dependency that I imported during development (#twilio/voice-sdk) works fine in the CRA version of the application, but I get the following error when I try to invoke the constructor in the Parcel version:
TypeError: (this._options.AudioHelper || audiohelper_1.default) is not a constructor
The package is identical between both (#v2.1.1, the latest). I'm importing using ESM syntax, so:
import { Device } from '#twilio/voice-sdk'
I trying using CommonJS syntax (require) and it still didn't work. I've dug into the compiled code, and that seems to be the issue. I imagine there are a lot of differences, but one that I've noticed is here:
On the left is the code compiled by Create React App, which does seem to be exporting something more substantial than on the left - is the export just an empty object? If so, it's no wonder I'm getting a constructor error.
Unfortunately, no amount of googling and SO sleuthing has clarified what I could do to make ParcelJS transpile this dependency properly, if that's the issue. I've tried to make the babel config for ParcelJS match CRA more closely by adding the following to a babel.config.json
{
"plugins": [
"#babel/plugin-transform-modules-commonjs"
]
}
But no luck. Any ideas from where to go from here, or is it time to switch to Webpack?
It looks like Twilio package has a problem when using Parcel 2: https://github.com/twilio/twilio-voice.js/issues/101

Live Sass Compiler - #use causes compilation error

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.

What does the rust-analyzer error "could not resolve macro `$crate::format_args`" mean and how do I fix it?

I'm using rust-analyzer version 0.2.408 on Visual Studio Code.
I'm writing a command line application that involves centering text in the terminal. This is the function I wrote to do this:
use console::{Alignment, pad_str};
fn get_padded_row(row: &str, width: u16, symbol: Option<char>) -> String {
let symbol = symbol.unwrap_or(' ');
return pad_str(row, width as usize, Alignment::Center, None)
.to_string()
.replace(' ', &symbol.to_string());
}
This function works perfectly fine, and there were no errors with it. Then I wrote a test:
#[cfg(test)]
mod tests {
use crate::get_padded_row;
#[test]
fn row_padding_dashes() {
let padded_row = get_padded_row("hello", 15, Some('-'));
assert_eq!(
padded_row, "-----hello-----".to_string(),
"`get_padded_row` was not correct, got `{}`", padded_row
);
}
}
The code still works perfectly fine. Both cargo run and cargo test work, the function passes the test, and cargo check returns no issues. But rust-analyzer gives an error, highlighting everything from the tr}; in the use statement to the p right after return: "could not resolve macro $crate::format_args rust-analyzer(macro-error)". Searching for this error returns nothing. VSCode links me to rust-analyzer user manual, which says only "This diagnostic is shown for macro expansion errors". Restarting VSCode and reinstalling rust-analyzer have done nothing. The error always comes back, and highlighting the same oddly specific region. The only way I've found to get rid of it while keeping rust-analyzer installed is to remove the test.
Judging from how the error is about macro expansion, and how removing the test fixes the issue, I'd imagine it's caused by the #[test] macro, but it's strange that rustc finds no issues at all with my code while rust-analyzer is freaking out about this error. So far, I've had better experiences with rust-analyzer than with the official Rust VSCode extension, but I'm on the verge of switching back to fix this issue.
This is a bug in rust-analyzer. For now, you can disable the warning in your settings.json:
"rust-analyzer.diagnostics.disabled": [
"macro-error"
]
The bug was fixed on nightly, so you could install the nightly binary of rust-analyzer from GitHub, or you could just wait a couple days for the fix to land on stable.
Alternatively, you could downgrade to rls version 0.2.400, because the bug was caused by a commit in version 0.2.408:
Extensions Icon -> rust-analyzer -> Manage (gear icon) -> Install Another Version
Three months later and there seems to be a bug with Nightly release? Unsure.
I added unresolved-macro-call to Diagnostics: Disabled settings for rust-analyzer.
I've tried many things, read the open issue on github, etc which is tagged as solved, but persists here.
For vscode users, open settings (json) and disable by adding:
"rust-analyzer.procMacro.enable": false

How to Enable Linting for Braceless SASS with Svelte-VSCcode

Currently, I have VSCode properly linting SCSS for Svelte using the following setup; however, it does not work for braceless SASS. <style type="text/sass"> will process correctly, however VSCode will repeatedly highlight errors requesting braces.
How should I update the follow to allow linting for braceless SASS?
\\ svelte.config.js
const sveltePreprocess = require('svelte-preprocess');
module.exports = {
preprocess: sveltePreprocess()
};
Unfortunately SASS is not supported. The Svelta Beta extension only supports syntax for Less/CSS/SCSS. This is the case because the html language service that the work is delegated to (https://github.com/microsoft/vscode-html-languageservice) does not support SASS.

Typescript: unexpected reserved word in PHPStorm

I´m trying to get a simple TypeScript file working in PHPStorm, but sadly there seem to be some misconfiguration by default as the class keyword is not recognized properly
This is my TypeScript file:
class Test{
}
And this is the error I´m facing:
And this is my FieWatcher configuration of TypeScript
How can I get TypeScript working?
The Program options should not be node.exe (that would mean you are trying to typescript code as javascript). It needs to be tsc or node tsc(that means you want to run tsc to compile the file to javascript).
PS: this video might be helpful : https://www.youtube.com/watch?v=RWXGMug_Rmo&hd=1