Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 24 days ago.
Improve this question
I asked on the official Discord, no one answered, I have dug through all sorts of information online and nothing has worked.
Basically, I want to get the TailwindCSS plugin for Prettier up and running, so I can order my classes consistently in my SvelteKit project, and I am having no luck.
I have followed all sorts of tutorials, like this one, to a tee and nothing is working. I have uninstalled the Svelte Prettier plugin, restarted VSCode, changed my config file, restarted VSCode again, and again.
Maybe I'm missing something really basic. How can I fix it? I have got the plugin working in my app.postcss file, but not in .svelte files.
I can provide my config files.
Try this out!
Make sure your tailwind-css prettier plugin is installed properly.Run this code.
npm install --save-dev tailwindcss-prettier
Add this line to settings.json
"prettier.plugins": [
"tailwindcss-prettier"
]
Add finally configure prettier with svelte using this in your settings.json
"prettier.parser": "svelte"
Note: If your project is using postcss config file, you can configure it to use tailwindcss-prettier.
Related
I am doing an online course on Advanced CSS and Sass and found out that the way it is shown in the course is a bit outdated.
The course uses node-sass in the dependencies, which is deprecated. A direct alternative to this would be to use Dart-sass (I will write my steps to do so in the end, maybe someone will benefit from this :))
Another alternative is to use the VS Code Extension "Live Sass Compiler". It seems that this option is quite well accepted.
However, I wonder what benefits and differences these options have. E.g. I had some troubles with the extension yesterday and then used the dart sass as a dependency and solved my problem this way. Maybe this was due to something wrong in my code, but still, it left me with this question and I think others might have the same in the future.
PS: It is my first question here, don't roast me if I did something wrong :D
For those interested in how to change the code from node-sass to dart-sass here are the steps (at least for me these were the steps in the course I did):
Install dart sass using the command line: npm i -D sass
Change your scripts where it says node-sass to just be sass (in package.json)
Change the -w in your watch:sass script to --watch (in package.json)
You can also do npm uninstall node-sass to get rid of it
I do not know what exact tutorial you are looking at. Also, I am not so experienced at the front-end, but in my opinion, using Sass as a css-preprocessor isn't the best option on production for now.
But, since you are asking how to implement sass, I'll describe a procedure, like you are using React with npx create-react-app.
First, you were right, about using dart-sass over sass. This command should help you with that: npm install --save-dev sass. According to the question, seems you already tried that.
After that, add new script to your scripts in your package.json file: "sass" : "sass src/Sass:src/Css --watch --no-source-map" and you are done.
In my own opinion, I prefer to implement it via npm instead of VSC plugin. It will more stable after all. But if you are using it, for test/study purposes, I think, you could try both.
If you want to use the most actual version Dart SASS with 'Live Sass Compiler' you need to take care about the version. The most popular version is not supported for years so it does not support Dart Sass.
But there is a fork which is supported and as fork you can use same settings.
To your Question about NPM and Live Sass Compiler: both are Javascript Version off Sass. As Javascript versions they are not as fast as if you install SASS direct on your System. The difference between Javascript vesion itself its not as big. So I think the best choice between NPM and Live Sass compiler is to use Live Sass Compiler (the forked version!) as it is integrated to the editor and easier to use direct from there.
If you need a faster solution you really should install the original version. That is not as difficult as it sounds. And there is a VS Code Extension as well wich make it possible to use that original installed version easy direct up from VS Code.
Detailed Information:
Install SASS direct on your system:
https://sass-lang.com/install
Information to the named VS Code extension:
https://stackoverflow.com/a/66207572/9268485
Here is my problem, I am trying to create an e-commerce with the sylius framework which itself is based on symfony.
In the documentation, it says that the best way to download assets and therefore personalize your store is
to use webpack encore. So I followed the steps described in the doc by having composer require symfony / webpack-encore-bundle
then yarn install but unfortunately, when I have to do yarn encore dev, I have a problem. Note that at the time of yarn install, dependencies do not install correctly.
After doing research on the net, I understood that there is a conflict between yarn and gulp which is installed by default in sylius and that to correct the problem,
you must erase all traces of gulp. Personally i think this should not be the responsibility of neophytes. I found on github a branch of sylius without gulp called bye-bye-gulp I tried to clone it but impossible to work with.
If there are people who know how to hack this problem or better, people who have already passed this stage, please come to my aid.
thank you in advance
Welcome to SO Markus,
This is not a proper question for stack overflow, please read the guidelines. You might want to post your different webpack.config.js (the one in your theme folder too) to start with so we at least have some code to look at. It worked pretty easily for me on my current project based on Sylius 1.7, what tutorial are you using ?
In VSCode, in settings.json for one of my extensions is a line
"extends": "C:/Users/snarl/.vscode/extensions/stylelint-config-wordpress",
But that line is dimmed compared to the rest of the text in the file, as if disabled, or path not found (screenshot). Is that indicating some kind of error I need to resolve? That folder does indeed exist at that location (screenshot).
Motivation For My Question
I ask because this is a line of code I manually added to settings.json, as part of installation instructions for a particular extension. I'm currently using the stylelint extension to help notify me of errors while I type. I am now trying to install a separate extension--stylelint-config-wordpress--which is a set of rules to be used with stylelint. But that new ruleset doesn't seem to be working properly. So I am now trying to troubleshoot why the new rules are not working properly. The settings.json file I edited is part of the stylelint-config-wordpress extension.
Of Note
I am running Windows 10.
When I initially installed stylelint, I installed it globally. I can confirm it was installed properly and linting errors in my code, as expected.
In the GitHub repo for stylelint-config-wordpress, there is one issue related to this (see here). I posted there and received some initial replies. But nothing worked, and I've not heard back since.
After opening an issue in the relevant GitHub repo, I was able to understand the answer to my question.
Short Answer: The code I was adding was incorrect. I was adding:
extends": "C:/Users/snarl/.vscode/extensions/stylelint-config-wordpress",
when I should have been adding something more along the lines of this:
"stylelint.config": {
"extends": "C:/Users/snarl/index.js"
},
Long Answer: If anyone is really curious about how to get this ruleset working in VSCode, you can read this issue.
I'm looking to install Webpack4 for a project.
Part of what I want it to do is lint css.
Just about every resource I find points to "stylelint-webpack-plugin" (https://github.com/JaKXz/stylelint-webpack-plugin).
That project's not been getting updated for a long time.
From what I can tell the webpack team bullied the dev responsibile for lots of the work on stylelint-webpack-plugin right out of the community.
So now the project's got nobody doing the work and it's "looking for a maintainer". After that whole mess, doesn't look like anyone's signing up.
From my perspective -- Oh Well! Next !?
Is there a different alternative to stylelint-webpack-plugin for lint-ing styles in a webpack setup?
The stylelint-webpack-plugin now belongs to the official webpack-contrib GitHub organisation. The plugin's dependencies are up-to-date and it supports the latest version of stylelint (version 9).
I believe it is the still the most appropriate plugin for using stylelint within Webpack.
I am using CSSLint via the CLI. I have spent quite a bit of time following the steps found here and here to write custom css linting rules. They are tested and they work correctly, however now that I have created the rules I am not sure how to actually add them to the linter (or installed via npm) so that can be used via the CLI to lint my projects. I have scoured the documentation in the github wiki and cannot seem to find an answer.
Keep in mind these rules are project specific and they are not meant to be submitted to the csslint github repo.
Figured it out. I used 'grunt release' and then published it as an npm module, and then installed it. The cause for the issue was that I needed to uninstall the original version of cssLint as it was overriding the new one.