VSCode Project Based Persistent File Associations

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:

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

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

Happy days!