Although Vue3 has been released for a while, I haven’t tried it yet. It happened that I haven’t written any code for more than a month. Today, I got interested and wanted to write something through Vue3 and Vite. We finally solved the problem with the tools one by one.

I think it took me a lot of time to solve these problems. I have searched both Chinese and English materials, and I will sort out the solutions and share them here. Step by step, I will first show the problems and then solve them in order.

By reading this article, you will be able to:

  • Create Vue3 projects with JSX and SCSS support via Vite;
  • For VSCode.jsFiles and.vueFiles use the same set of ESLint rules and can be formatted normally.vueFile;
  • Debug Vue components normally in Firefox.

To read this article, you need to have:

  • The browser has at least a stable version of the Vue development extension installed.
  • VSCode installs Vetur and the most widely installed ESLint extension.

Note that some of the options mentioned in this article only apply to the actual situation as of this writing (August 9, 2021); Most of the scenarios mentioned in this article assume that there are no associated configuration items that are intrusive (for VSCode) or development dependencies that are intrusive (for NPM).

Start by trying Vite

In order to create the most smooth and “official” Vue3 development experience, I directly use Vite to create Vue3 project, according to the documentation, run the following command:

npm init vite@latest
Copy the code

Select VUE to create a project using the corresponding template:

Enter the project, install the dependencies, and view the effects in your browser:

cd< project root > NPM install NPM run devCopy the code

The project ran successfully, but I encountered an embarrassing problem. The browser development extension did not recognize the Vue3 project. In other words, I could not easily view the component status:

The latest Vue3 project is not yet supported by the stable development extension, but a beta version is available.

The beta extension is available on GitHub, but only for Firefox, although it appears that a separate beta extension is already available in the Chrome online app store:

You can choose according to the actual situation, after installing the corresponding extension, the browser can normally view the component status:

Once you’ve played Vite, you’ve got to start writing code, run VSCode to open your project files, and everything is fine. However, the current project configuration does not meet my requirements:

  • ordinary.jsThere are no formatting constraints on files, I need to enable ESLint;
  • While Vetur has automatic formatting, its default rules are not consistent with my own ESLint rules, so I need to keep ESLint’s custom rules in.vueAlso available on files;
  • Although templates are sufficient for most Vue projects, some component functions are more easily written by rendering functions, and JSX syntax support needs to be enabled to further facilitate writing.
  • Modern CSS is powerful, but SCSS still has its charm, and I want to use it in my projects.

Introduction of SCSS and JSX

For SCSS support, the Vite documentation states: Simply install the development dependencies of SCSS itself, no additional plug-ins are required for Vite itself:

npm install -D sass
Copy the code

For JSX syntax support, Vite needs to install additional plug-in development dependencies:

npm install -D @vitejs/plugin-vue-jsx
Copy the code

Then reference the plug-in in the viet.config.js file:

.import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [
    ...
    vueJsx(),
  ],
})
Copy the code

Next, write the Test component test.vue to verify the results of the operation:

<script lang="jsx">
import { defineComponent } from "vue";

const Test = defineComponent({
  render() {
    return <div>Test&nbsp;<span>Succeeded</span></div>; }});export default Test;
</script>

<style lang="scss" scoped>
div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  background: black;
  color: white;
  font-size: 24px;
  font-weight: bold;

  span {
    color: yellowgreen; }}</style>
Copy the code

How the project works in the browser:

Everything was fine, but just as I was about to cheer, I noticed a problem: the

After repeated investigation, it was found that the

So I have to leave the lang=” JSX “attribute, VSCode formatting issues aside.

Initial implementation of Vue and JavaScript ESLint experience consistent

I have always liked to use my own custom ESLint rules, and this Vue3 project is no exception. While custom rules cannot be applied directly to.vue files at the moment,.js files are easy to use by installing ESLint’s development dependencies:

npm install -D eslint
Copy the code

After copying my treasured.eslintrc.json file to the project root directory, something happened that I didn’t expect: VSCode didn’t enable ESLint at all, and the bottom status bar didn’t even show the corresponding button.

At first I thought there was a problem with my configuration file or dependency installation, but after a lot of tossing and checking, I found that it didn’t seem to be the case. Finally I found the answer in GitHub issue: It seems that the latest version of ESLint, the most downloaded version of VSCode, has a Bug that doesn’t work properly. After searching for related extensions, I found an extension that is almost a copy of the above extension. The only difference is that the version number is smaller. Presumably someone forked an old, bug-free version and uploaded it to the extension store. After installing it, by repeatedly restarting VSCode (due to various delays, sometimes VSCode does not immediately work with new configuration items or new extensions, so it needs to be restarted repeatedly, and then everything else, The ESLint extension finally works on the.js file:

The next goal is to make ESLint’s custom rules available on Vetur.

First, to be Vue compatible, you need to install a plugin for ESLint:

npm install -D eslint-plugin-vue
Copy the code

Next, configure it in.eslintrc.json:

{..."extends": [..."plugin:vue/recommended". ] . }Copy the code

Note that this item is also added for compatibility with JSX syntax:

{..."parserOptions": {..."ecmaFeatures": {
            "jsx": true},... },... }Copy the code

The ESLint extension doesn’t know it needs to listen on.vue files, so it needs to add the following fields to VSCode’s configuration file settings.json:

{..."eslint.validate": [
        "javascript"."javascriptreact"."vue"],... }Copy the code

This is where the results start:

Prettier ESLint for a consistent ESLint rule-based formatting experience

While ESLint can now check for syntax problems in.vue files, VSCode is not yet able to automatically format those files according to the given rules to eliminate ESLint errors and warnings, and there is still some work to be done to fix the above unformatted test.vue files.

After looking at the data, I found that many bloggers said:

Prettier-eslint Vetur has a number of built-in formatting tools for JavaScript, including Prettier-esLint, which can be enabled by adding the following configuration items to VSCode’s settings.json configuration file:

{..."vetur.format.defaultFormatter.js": "prettier-eslint"."vetur.format.defaultFormatter.ts": "prettier-eslint". }Copy the code

But this is not enough, we need to add the corresponding development dependency:

npm install -D prettier-eslint
Copy the code

This will make formatting work… ?

After the actual operation, I found that it could not be done. I don’t know exactly which part had the problem, but I think it was probably Vetur, so I tried to install another VSCode extension to solve the problem.

After the extension is installed, add the following configuration items to settings.json to enable it:

{..."[vue]": {
        "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"},... }Copy the code

After formatting in VSCode, you’ll see that everything is already available, including in the test.vue file:

Since Vue2 does not support the root node as a non-single node, but Vue3 does, you can add the following rules to.eslintrc.json to remove unnecessary ESLint errors:

{..."rules": {..."vue/no-multiple-template-root": "off". },... }Copy the code

That way, all the problems are solved and you can happily use VSCode with Vite to write your Vue3 project!

If you want the same one-click formatting experience on your.js file as your.vue file, consider adding the following fields to your.vscode/settings.json workspace configuration file:

{..."[javascript]": {
        "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"},... }Copy the code

Project summary

precondition

  • You have VSCode, the Node.js runtime, and any modern browser installed;
  • VSCode has Vetur and the most downloaded ESLint extension installed;
  • Any modern browser has a Vue development extension installed.

Shell command

npm init vite@latest
cd< project root directory > NPM install NPM install -d sass NPM install -d @vitejs/plugin-vue-jsx NPM install -d espm install -d eslint-plugin-vue npm install -D prettier-eslint npm run devCopy the code

VSCode extension

  • ESLint (old version clone)
  • Prettier ESLint

VSCode configuration items

{..."eslint.validate": [
        "javascript"."javascriptreact"."vue"]."[vue]": {
        "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"},... }Copy the code

. Eslintrc. Json configuration items

{..."extends": [..."plugin:vue/recommended". ] ."parserOptions": {..."ecmaFeatures": {
            "jsx": true},... },"rules": {..."vue/no-multiple-template-root": "off". },... }Copy the code

Vite. Config. Js configuration items

.import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [
    ...
    vueJsx(),
  ],
})
Copy the code

Browser Extensions

  • Firefox
  • Chrome

Expansion: through configurationjsconfig.jsonFurther improve the development experience

If you just follow the above process to create a Vue3 project from Vite, Vetur will display a notification every time you run VSCode and open the.vue file for the first time:

Since the sample project is developed in JavaScript by default, I chose to create a jsconfig.json file and write the following configuration:

{
    "compilerOptions": {
        "target": "esnext"."module": "es2020"."strict": true."jsx": "preserve"."moduleResolution": "node"."checkJs": true
    },
    "exclude": [
        "node_modules"]}Copy the code

Where “moduleResolution”: “node” is crucial, because the Vue dependency package writes in its entry file node_modules/ Vue /index.js:

'use strict'

if (process.env.NODE_ENV === 'production') {
  module.exports = require('./dist/vue.cjs.prod.js')}else {
  module.exports = require('./dist/vue.cjs.js')}Copy the code

This means that Vue uses the CommonJS module scheme, and if these fields are not written in the configuration file, the TypeScript checker will report an error when importing Vue dependencies in a.js file.

Json file “checkJs”: true enables TypeScript type checker for.js files. To verify the effect, I created a test file named test.js in the SRC directory:

/ * * *@param {String} value* /
export default function test(value) {
    return value
}
Copy the code

With jsdoc-style comments, VSCode uses TypeScript’s type checker to check data types in.js files. Interestingly, VSCode, or TypeScript type checker, The types and description syntax it supports here are actually supersets of JSDoc, which means that the scope of JSDoc annotations here will be closer to the needs of actual development; It is also important to note, however, that once the “superset” syntax is used, JSDoc comments in source files cannot be compiled into separate documentation files by the JSDoc tool.

I’m about to introduce test.js to other files to test the effect, but TypeScript checkers will report errors when I try to introduce the.vue module to a.js file and say it can’t be found, not when I introduce the.vue module to a.vue file:

I finally found the answer in an issue on GitHub, which simply says: TypeScript checkers don’t recognize modules with vue file suffixes by default. Create vue-shims.d.ts file in the root directory of the project and write the following definition statement:

declare module "*.vue" {
    import { defineComponent } from 'vue';
    const component: ReturnType<typeof defineComponent>;
    export default component;
}
Copy the code

Next introduce test.js in other files to validate the TypeScript type checker:

It mostly succeeds, as the TypeScript type checker reports errors whenever a function is called and filled in with the wrong number of arguments or arguments of mismatched types. But only in the test. vue file does the TypeScript type checker fail because Vetur fails to recognize a valid JavaScript code area to call the TypeScript type checker. As a temporary solution to the problem above, This can be done by temporarily removing the lang=” JSX “attribute from the

In addition to the above problem, which has no permanent solution, there are some areas where Vetur has not kept up with The Times. For example, the Setup SFC syntax sugar for