VS Code workflow improvements: workspaces, icons, and tasks

Recently I discovered a VS Code feature I didn't know about before: while a project folder is open, another different root folder can be added to the same window. I always thought that opening a project can only have one top-level root folder, and if you need to open another folder, it must be opened in a new window. But that's not the case!

In CodePen, we use the "dual repository" mode (a main Ruby on Rails application, a microservice), and now I can open both repositories at the same time:

Now, I can search across two projects and basically handle it as a big project.

The first time you do this and then close the VS Code window, it asks if you want to save a "workspace". I've always felt a little trouble before, thinking it would create a file and I don't have a proper place to store such files (I avoid putting it in a repository because I don't want to impose my system on others).

Eventually, I overcome my laziness and create a local folder to store all .code-workspace files. These files are very useful, I can add them to the Dock and open the workspace I have set up with one click.

Custom workspace icon

Workspace files have special icons:

Since I put these files in the Dock, I thought of creating custom icons for them! This will make my workspaces clear at a glance and more convenient to use, as I may open them multiple times a day.

I took the SVG logo from the original icon and placed it in the bottom right corner of my project logo.

Changing the logo on macOS is very simple: just right-click the file, select "Show introduction", then click on the logo in the panel, and paste a new picture.

Now I can save them in the Dock and open all the projects with one click:

Start the terminal command when opening the project

Now that I have these handy one-click project opening icons, I thought, “It would be cool if it could also launch the project startup command!”. Obviously, that's what Tasks are for and it's not hard to set up (thanks Andrew!). In the .vscode/tasks.json file, I added the following:

 {
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Run Gulp",
      "type": "shell",
      "command": "gulp",
      "task": "default",
      "presentation": {
        "focus": false,
        "panel": "shared",
        "showReuseMessage": true,
        "clear": true
      },
      "runOptions": {
        "runOn": "folderOpen"
      }
    }
  ]
}

Whenever I open this workspace, it launches the gulp command for me. I think you have to run the task manually (terminal → run the task) so that it has the correct permissions and then it works fine.

Override settings

I don't think this is just a workspace-specific feature, but I really like to overwrite the VS Code settings in the project folder using the .vscode/settings.json file.

For example, in CSS-Tricks, I have a very basic Sass setup where Gulp preprocesses .scss to .css . This is fine, but I might search for selectors. I don't need to see it in .css because I never use native CSS. I can add this to the settings file and know that it only works for this project, not all projects:

 {
  "search.exclude": {
    "**/*.css": true,
  }
} 

The above is the detailed content of Some Little Improvements to My VS Code Workflow (Workspaces, Icons, Tasks). For more information, please follow other related articles on the PHP Chinese website!