VS Code Extensions recommendations?

Development

AI-generated summary

pfaffman is seeking help to configure VS Code to work with Rubocop, ESLint, and Prettier. They want to format code on save and warn about non-auto-correctable issues.

david shares their VS Code configuration, which includes plugins for ESLint, Prettier, and Ruby, along with relevant settings to enable formatting on save for JavaScript, SCSS, and Ruby files.

david also mentions using a lefthook configuration to run linters on changed files before committing, which can help catch issues before Travis complains.

david provides instructions on how to set up lefthook, involving installing dependencies, running lefthook install, and then running linters on changed files before committing.

pfaffman thanks david for their help and is planning to try out the suggested settings.

1

I’m an aged use of Emacs. I’ve been trying VS Code for a while. (Surprise–it’s no easier to configure this infinitely extensible editor than it was emacs. I’ve not given up, and it’s really good for a few things, but I’m not even as much of a convert as I’d have hoped).

So, does someone have a configuration that makes Rubocop, eslint, and prettier happy? It’s maddening to not be able to see that stuff until Travis complains and then copy-paste those commands (which should be in bash history by now) to figure out if stuff is wrong.

Can’t I just make it format stuff on save, and warn loudly if it’s not auto-correctable?L

If someone has this working in a way that’s beautiful, I’d love to know what set of plugins you’re using.

But maybe I’ll go see about getting emacs to do this and the couple things I really like (the best so far being shift-control-f to grep a whole sub-directory tree.

2

I think there are a few of us at CDCK that use VSCode for everything. For linting/formatting, I have:

And the relevant settings:

{
    "editor.tabSize": 2,
    "[javascript]": {
        "editor.formatOnSave": true
        "editor.defaultFormatter": "esbenp.prettier-vscode",
    },
    "[scss]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[ruby]": {
        "editor.formatOnSave": true,
    },
    "ruby.useBundler": true,
    "ruby.format": "rubocop",
    "ruby.lint": {
        "rubocop": {
            "useBundler": true,
        }
    },
    "editor.formatOnSaveTimeout": 10000,
    "eslint.format.enable": true,
    "javascript.validate.enable": false,
}

Yeah for sure! For discourse core, we have a lefthook configuration to try and save some of that pain. If the on-save editor integration isn’t enough, you could certainly do a similar thing in your plugins.

I’d also highly recommend installing the ‘GitLens’ plugin for VSCode. It can give you useful blame annotations while you’re working:

Screenshot 2021-03-25 at 21.43.11
Screenshot 2021-03-25 at 21.43.112008×398 52 KB

3

I haven’t done it yet, but I wanted to say now a big thanks! And maybe your settings will be the juice I’m missing once I figure out where to stick that.

Can you say more about how to make that left hook do something?

4

I think you just need to cd to your discourse directory, run yarn install (which you may have already done), and then lefthook install

Then, every time you try to git commit it will run the linters on the changed files, and warn you of any issues.