How to force single quotes in VSC - javascript

Maybe this problem is stupid but I really don't know what's going on. In my .eslintrc I added this rule:
"quotes": [1, "single"]
and everytime I save file it changes every " to '. And that's nice. BUT. Every time I restart my Visual studio code. Or make commit using Sourcetree ALL quotes in my project are changed to double ones. Does anybody know what's causing this?

Maybe it's because vscode doesnt know the exact location of your .eslintrc.json, so add the following to your vscode settings json file and reload vscode :
{
"eslint.options": { "configFile": "C:/mydirectory/.eslintrc.json" }
}
also I believe the right way to provide single quotes(even for strings) is like so :
"rules": {
"quotes": [2, "single", { "avoidEscape": true }]
}

Related

VS Code emmet custom snippets in .vue file

I'm loving the power of Emmet snippets in VS Code as I am new to this IDE. I have a question that I can't seem to google to get an answer. So I figured out how to add emmet snippets into my .vue files by adding the following into my VS code settings.json:
"emmet.syntaxProfiles": {
"vue-html":"html",
"vue":"html",
}
And that works well, but I wanted to add a couple custom snippets, so I added this entry as well:
"emmet.extensionsPath": [
"C:\\CodeSnippets"
],
The relevant code in one of those snippet files is the following:
{
"html": {
"snippets": {
"ull": "ul>li[id=${1} class=${2}]*2{ Will work with html, pug, haml and slim }",
"oll": "<ol><li id=${1} class=${2}> Will only work in html </ol>",
"vgc": "{ Wrap plain text in curly braces }",
"ig": "{import ${1} from './${2:components}/${1}.vue'}"
}
},
"css": {
"snippets": {
}
}
}
Now when I'm inside of a '.html' file I can type oll and it will add the snippet as seen in screenshot .
But when inside of the .vue file I type the same thing and nothing happens. Now I know Emmet is working in my .vue file because I can do other emmet stuff in there as seen in screen shot below:
I'm sure I'm missing some type of configuration but can't figure it out. Any ideas?
What you're looking for is probably
> Snippets: Configure User Snippets
Then selecting
vue-html.json
With this example JSON
{
"test snippet": {
"prefix": "vvtest",
"body": [
"some ${1:test}"
],
"description": "some random test snippet for the template part of Vue"
}
}
Press tab and you'll get the following
PS: note that the ${1:test} part will make that test is highlighted so that it can be quickly overridden. You can also cycle towards a number 2, 3, etc...with other $2 ... with tab.
Here is the official page for this feature.

Prettier extension in VS code is not working, I tried everything including yt tutorials and what ever i did nothing helped

im desperate, finaly made myself study some react and guess what, cant even start cuz suddenly my settings are messed up. When ever I try to save to auto format nothing happens. I really tried everything from here on stackoverflow and even yt but nothing really helped...Gonna show you my code :this is how it looks like after I press ctrl+s to save the file and to format it...
Like a week ago everything worked well and somehow I messed up the settings. Would be helpful if someone sent me his settings.json because Ive tried some Ive found on google and none helped. I really wanna study React but this wont let me. I know I can use codesandblox but its not it...Thx in advance...
You need to set your default formatter to Prettier and enable format on save.
Default Formatter
To ensure that this extension is used over other extensions you may have installed, be sure to set it as the default formatter in your VS Code settings. This setting can be set for all languages or by a specific language. The following will use Prettier for only Javascript.
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
Format On Save
Respects editor.formatOnSave setting.
You can turn on format-on-save on a per-language basis by scoping the setting:
// Set the default
"editor.formatOnSave": false,
// Enable per-language
"[javascript]": {
"editor.formatOnSave": true
}
{
"git.autofetch": true,
"terminal.explorerKind": "external",
"files.autoSave": "afterDelay",
"terminal.integrated.profiles.windows":{"Git Bash":{"path":"C:\\Program Files\\Git\\bin\\bash.exe"}, },
"terminal.integrated.defaultProfile.windows": "Git Bash",
"editor.formatOnSave": true,
"html.format.indentHandlebars": true,
"html.format.indentInnerHtml": true,
"settingsSync.ignoredExtensions": [
],
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
}

Is there a way to resolve the Stylelint error for semicolons in CSS variables?

React.js
Css in JS(Emotion)
It consists of the above.
Stylelint is configured as follows.
module.exports = {
extends: [
"stylelint-config-standard",
"./node_modules/prettier-stylelint/config.js",
],
ignoreFiles: ["**/node_modules/**", "src/styles/**"],
plugins: ["stylelint-order"],
rules: {
"declaration-empty-line-before": "never",
indentation: 2,
"no-missing-end-of-source-newline": null,
"string-quotes": "single",
"order/properties-alphabetical-order": true,
},
};
CSS is as follows.
import emotionReset from "emotion-reset";
const globalStyle = css`
${emotionReset};
`;
The following error message appears for ${emotionReset};.
Unexpected extra semicolon (no-extra-semicolons)stylelint(no-extra-semicolons)
Error
Is there any way to resolve this error?
By the way, you will see the error, but the CSS is working.
I thought that disabling no-extra-semicolons would solve the problem, but there doesn't seem to be an option provided to disable it.
no-extra-semicolons · stylelint
This looks like a valid warning. You should be able to fix it by removing the semicolon from the highlighted line.
Replace:
${emotionReset};
with:
${emotionReset}
By the way, you will see the error, but the CSS is working.
The extra semicolon generally won't break your CSS. But it doesn't add anything either, so it should be safe to remove it.
I thought that disabling no-extra-semicolons would solve the problem, but there doesn't seem to be an option provided to disable it.
You can use null to disable a rule. See stylelint's configuration docs for more details.
I think this rule will work for you
"no-extra-semicolons": [
null,
{
"message": "Extra semi-colon."
}
],

How to properly re-configure JSPrettier after an update with a breaking change?

I am trying to make Jsprettier work in Sublime, but the formats I set up can't be applied, because I keep getting an error when I want to save a document (jsprettier: format failed). When I open the console to see what the error is it says: The system cannot find the path specified. (CR).
The settings in the user settings tab of jsprettier are the following:
{
"prettier_cli_path": "/c/Users/Adri/AppData/Roaming/npm/prettier",
"node_path": "/c/Program Files/nodejs/node",
"auto_format_on_save": true,
"prettier_options": {
"printWidth": 120,
"tabWidth": 2,
"singleQuote": true,
"trailingComma": "none",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"parser": "flow",
"semi": true,
"tabs": false
}
}
Thank you
In your terminal run the following:
which node
which prettier
Copy the result of the output for each step and in SublimeText3 proceed to:
Preferences --> PackageSettings --> JsPrettier --> Settings-User
In the user settings build your file as such:
{
"prettier_cli_path": "output from terminal here",
"node_path": "output from terminal here",
"auto_format_on_save": true,
}
I found that when JsPrettier updates it erased these settings on me and needed to re-enter them...
Hope that helps.
tested on: Sublime Text 3.2.2, MacBook Pro
Install Js​Prettier globally using npm:
npm install --global prettier
Install JsPrettier from Package Control by:
Sublime Text-->Preferences-->Package Control-->type and enter: Install Package-->type and enter: JsPrettier
restart Sublime Text
In case this helps anyone:
While this installed easily on one computer, I struggled with it on a second one.
After being required to set the node and prettier_cli path, I got node errors.
What worked in the end was setting the prettier_cli_path to prettier.js within the prettier node_modules directory as such:
C:/Users/Me/AppData/Roaming/npm/node_modules/prettier/bin-prettier.js
Problem solved!
I just took the first 2 lines out (paths) and now it works!
In my case, I had to fully restart Sublime 3 after it has installed a new Sublime version.
If someone is having trouble with this even now, it may help to know that Prettier requires node >= v10.
To get this to work, you may have to set your node version as >= 10, I personally prefer 12 or 13.
You can do this either by using nvm alias default 12 fornvm or n 12 for n
Now, update the user settings file to make sure prettier has the right paths to prettier and node. Find the paths to node and prettier using which
which prettier
which node
Add the paths and flags to auto format on save as desired
{
"prettier_cli_path": "/Users/user/.nvm/versions/node/v12.13.1/bin/prettier",
"node_path": "/Users/user/.nvm/versions/node/v12.13.1/bin/node",
"auto_format_on_save": true,
"format_on_save_extensions": ["tsx", "json"]
}
Now reload sublime
You're running an outdated version of Prettier. Please update again to the latest version, which is v1.6.1 (as of Sept. 13, 2017).
If you want to use v1.5.x on purpose, you can add the --no-config option to the additional_cli_args setting,
and tell Prettier not to attempt to find config files.
json
{
"additional_cli_args": {
"--no-config": ""
}
}

Grunt Concat same file multiple times

I'd like to use grunt-contrib-concat for application frontend HTML templating purposes and this would be useful for me.
I'd like to define page partials and and concatenate them inside an output file that is going to be compiled by handlebars.
I've got everything set up, however Concat doesn't allow me to use the same file more than once.
Basically concat is filtering the sources so they don't occur more than once. The second partial1.hbs will not be concatenated.
pageconcat: {
src: [
'app/templates/partial1.hbs',
'app/templates/partial2.hbs',
'app/templates/partial1.hbs'
],
dest: 'app/result.hbs'
}
Is there any way to do this?
Update 1
After playing around with grunt's console output function, I was able to debug (of some sort) the concat plugin. Here's what I found out: The input array is deduplicated by grunt for some reason.
Update 2
The deduplication occurs in the foreach file loop that grunt uses. I've managed to bypass that (see answer). I do not know how reliable my solution is but it's a workaround and it works well if you don't put the wrong input.
You may be able to use the file array format to set up two different source sets. Something like this:
{
"files": [{
"src": [
"app/templates/partial1.hbs",
"app/templates/partial2.hbs"
],
"dest": "app/result.hbs"
}, {
"src": [
"app/result.hbs",
"app/templates/partial1.hbs"
],
"dest": "app/result.hbs"
}]
}
added "app/result.hbs" to second source set, as was pointed out in the comments.
Thanks.
Solution
After some debugging I came up with a solution. Certainly not the best, but it works fine, as it should.
I edited the concat.js plugin file inside the node_modules folder the following way:
grunt.registerMultiTask('concat', ...){
var self = this;
//several lines of code
//...
//replace f.src.filter(..) wtih
self.data.src.filter(..);
}

Categories