Search code examples
reactjstypescriptdockervisual-studio-codesyntax-error

Visual Studio Code Docker React TypeScript syntax highlighting

I have a React & TypeScript & Docker project set up and it all works great. However, my Visual Studio Code is reporting various errors, like missing types and similar.

How to make the highlighting work?

Error

enter image description here

enter image description here

Solution

  • While using docker, even if your folder is synchronised with a folder inside your docker image with volumes key, the node_modules is not a folder that is synchronized. But VScode, need them locally, without them, it can't do all this indexing things.

    Generally, a docker-compose file look like this (the one you provide is perfectly fine)

    version: '3.1'
    app:
        build:
            context: .
            dockerfile: Dockerfile
        ports:
            - "3000:3000"
        volumes:
            - .:/usr/src/app
            - /usr/src/app/node_modules

    The volume option on node_modules "prevent" synchronization on this folder between local and the images. So, I simply do an npm install or yarn in the local folder. Your image will normally not be impacted