DEV Community: Ricardo Sanchez

VSCode Project Based Persistent File Associations

Ricardo Sanchez — Thu, 29 Apr 2021 21:03:00 +0000

Personally, it use to be the case that while working on a JavaScript document, on a React project in VSCode, I get all the goodies from intellisense and emmet for JSX code, today that was not the case. So I decided to change the Language Mode from standard Javascript to Javascript React, and everything worked as expected.

Until I closed the file, VSCode change the file association back to standard JavaScript after I reopen it, fair enough.

But that meant that every time I close and open any JS document again I had to change the Language Mode back to JavaScript React, every single time. Not good.

Well there is a way to make all JS documents inside your project a JavaScript React document, no need to change the Language Mode ever again. My intent is not to make this the default VSCode global behaviour I just want this to happen for my React projects.

How do we instruct VSCode to have a predefined Language Mode for our particular projects?

Well the answer is by adding a setting in your workspace file.

If you already have a .code-workspace document in your project, simply add the following to your settings:

{
    ...
    "settings": {
        "files.associations": {
            "*.js": "javascriptreact",
        }
    },
}

If you do not have a workspace setup in your project folder, the process is simple:

Go to File -> Save Workspace As ...
Name the file and save it in the root folder of your project
Add the code snippet above

Now all your JS files will be treated as JavaScript React files

Happy days!

Need help setting up a basic CSS & JS build using NPM scripts

Ricardo Sanchez — Thu, 03 Sep 2020 18:00:34 +0000

Hi,

I need your help, I want to setup a very basic npm set of scripts to compile and minify Sass and JS ES6+ for personal projects.

So far my Google search only gives me old posts and convoluted builds that, at least for me, are hard to follow and refactor for my basic needs. For example most of the posts or video tutorials use uglify which is deprecated and don't work with modules, so I'm using Terser instead.

This is what I have so far:

"scripts": {
    "devserver": "live-server --open=/dist/",
    "sass": "node-sass scss/ -o dist/css/ -w",
    "terser": "terser js/index.js -c -m -o dist/js/index.js",
    "watch:sass": "onchange scss/*.scss -- npm run sass",
    "watch:js": "onchange js/*.js -- npm run terser",
    "start": "npm-run-all --parallel devserver watch:*"
},
"devDependencies": {
    "node-sass": "^4.14.1",
    "npm-run-all": "^4.1.5",
    "terser": "^5.1.0"
}

Any help, pointers and suggestions will be much appreciated.

How to change html “ entity colour in VSCode?

Ricardo Sanchez — Thu, 06 Aug 2020 21:05:02 +0000

The cover image shows how the Github colour-theme tint the html quotes entities like &ldquo and &amp and so on, but my favourite colour-theme Nostromo shown in the image below:

Does not apply any colour to those entities, I have looked at the entire colour-theme .json file to no avail. I would like to know what settings I need to change to apply those changes to my custom "workbench.colorCustomizations" settings. Hope that makes sense.

Any help will be much appreciated!

// END OF LINE