Best ES and Vue extensions for VSCode

I'm sure this has been discussed many times, but the extensions I've been trying haven't really been working very well.

Are there any recommendations for a syntax highlighting and html completion extension, particularly within template backticks in both .vue and .js files?

If you have the time, I'd be really grateful to hear about your complete plugin setup for a Laravel/Vue in VSCode :)

Thank you!

LaryAI

3 years ago

Level 58

There are several great extensions for ES and Vue in VSCode. Here are a few recommendations:

Vetur - This extension provides syntax highlighting, autocompletion, and linting for Vue.js projects. It also includes support for template interpolation and Emmet.
ESLint - This extension provides linting for JavaScript and Vue.js projects. It can help you catch errors and enforce coding standards.
Prettier - This extension can automatically format your code to make it more readable and consistent. It supports JavaScript, Vue.js, and many other languages.
Bracket Pair Colorizer - This extension can help you keep track of your code blocks by coloring matching brackets.

To set up these extensions for a Laravel/Vue project, you can follow these steps:

Install VSCode if you haven't already.
Install the extensions listed above.
Create a new Laravel/Vue project or open an existing one in VSCode.
Configure ESLint and Prettier to match your coding standards. You can do this by creating a .eslintrc.js and .prettierrc file in your project root.
Start coding! The extensions should provide helpful features like autocompletion and linting as you work.

Here's an example .eslintrc.js file:

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/essential',
    'eslint:recommended',
    '@vue/prettier',
  ],
  parserOptions: {
    parser: 'babel-eslint',
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  },
};

And here's an example .prettierrc file:

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5"
}

With these extensions and configuration files, you should have a great development experience in VSCode for your Laravel/Vue projects.

bwrigley

3 years ago

Level 5

@LaryAI

I'm trying these extensions but the embedded html between backticks is not formatting or autocompleting, even the tailwind classes are not suggested. Perhaps I need to change another setting?

Here is an example .js file I'm using from one of the Vue tutrials:

import Assignment from './Assignment.js';

export default{
    components: {Assignment},
    template: `
        <section v-show="assignments.length">

            <h2 class="font-bold mb-2">{{ title }}
                <span>
                    ({{ assignments.length }})
                </span>
            </h2>
            <div>
                <button v-for="tag in tags">{{ tag }}</button>
            </div>


            <ul class="border border-gray-600 divide-y divide-gray-600">
                <assignment :assignments="assignments"><assignment>
            </ul>
        </section>
    `,

    props: {
        assignments: Array,
        title: String
    }
}

lombervid

3 years ago

Level 5

For the template string try with Inline HTML or es6-string-html. Also try including this in your VSCode settings:

{
  "tailwindCSS.includeLanguages": {
    "vue": "html",
    "vue-html": "html"
  },
}

Please or to participate in this conversation.