Building foundation projects

Start by building a basic project template with Vite:

yarn create vite eslintJest --template vue-ts

cd eslintJest

yarn
Copy the code

After installing dependencies, you can start:

Now you can configure ESLint and Jest.

ESLint configuration

Install the initial dependency packages
yarn add eslint eslint-plugin-vue -D
Copy the code
Add the scripts command in package.json
{
    "scripts" {
        // Check all js, vue, ts files in SRC. --fix can automatically fix some errors
        "lint": "eslint src/**/*.{js,vue,ts} --fix".// Initialize the configuration file. Eslintrc.js
        "lint:create": "eslint --init"}}Copy the code
Generate the.eslintrc.js file

Perform yarn lint: create

If you want to install the above three packages with NPM, you can click Yes, otherwise you can click No, and then install the package with YARN or CNPM.

yarn add eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest -D
Copy the code

After this installation is complete,.eslintrc.js is generated.

Standard configuration

Here you can add the specification to the rules property. For details, go to the esLint website: eslint.org/docs/rules/

{
    // others ...
    "rules": {
        'vue/script-setup-uses-vars': 'error'."indent": [ "error".2]."linebreak-style": [ "error"."windows"]."quotes": [ "error"."single"]."semi": [ "error"."never"]."object-shorthand": ["error"."always"]."array-bracket-spacing": [
          "error"."always",
          { 
            "objectsInArrays": false."arraysInArrays": false}]."array-callback-return": "error"."arrow-spacing": "error"."block-scoped-var": "error"."block-spacing": "error"."brace-style": ["error"."1tbs", { "allowSingleLine": true}]."camelcase": "error"."comma-spacing": ["error", { "before": false."after": true}]."comma-style": ["error"."last"]."computed-property-spacing": ["error"."never"]."consistent-this": ["error"."that"]."constructor-super": "error"."curly": "error"."default-case": "error"."dot-location": ["error"."property"]."dot-notation": "error"."eol-last": ["error"."always"]."eqeqeq": ["error"."always"]."for-direction": "warn"."func-call-spacing": ["error"."never"]."func-names": ["warn"."as-needed"]."function-paren-newline": ["error", { "minItems": 4}]."getter-return": ["error", { "allowImplicit": true}]."guard-for-in": "warn"."implicit-arrow-linebreak": ["warn"."beside"]."jsx-quotes": ["error"."prefer-single"]."key-spacing": [ "error", {
            "beforeColon": false."align": "colon"}]."keyword-spacing": ["error", {
          "before": true."after": true}]."lines-around-comment": ["warn", { "beforeBlockComment": true}]."new-cap": "warn"."no-await-in-loop": "error"."no-buffer-constructor": "error"."no-cond-assign": "error"."no-empty": "warn"."no-constant-condition": "warn"."vue/no-multiple-template-root": "off"}}Copy the code
Other vuE3 configuration modifications

Here we need the eslint-plugin-vue plugin. There are three main points:

  1. Add the Parser attribute configuration 
    {
    // others ...
    "parser": "vue-eslint-parser"
}
Copy the code
  2. Extends adds the configuration of VUe3 
    {
    // others ...
    extends: {
        // others ...
        "plugin:vue/vue3-recommended"}}Copy the code
  3. Some of the key word checks on setup SFC do global variable configuration 
    {
    // others ...
    globals: {
        "defineProps": "readonly"."defineEmits": "readonly"."defineExpose": "readonly"."withDefaults": "readonly"}}Copy the code

At this point, the configuration of ESLint is almost complete, so let’s test it:

Add an incorrect code to app.vue

It is OK to execute check commands directly, as well as ESLint checks at run time

Yarn Dev does not check the specification. You also need to add a vite esLint plugin.

yarn add vite-plugin-eslint -D
Copy the code

Then add the following to your plugins in the viet.config. ts file:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import eslintPlugin from 'vite-plugin-eslint'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    eslintPlugin({
      include: ['src/**/*.js'.'src/**/*.vue'.'src/**/*.ts']]}}))Copy the code

Then run it again:

This is already out.

Jest configuration

NPM package installation

Install the required packages first

yarn add @babel/core @babel/preset-env @testing-library/jest-dom @types/jest @vue/test-utils@next @babel/preset-typescript @vue/babel-plugin-jsx vue-jest@next -D

// The versions of the following three packages need to be fixed. Some versions do not correspond to vue-test, so errors will occur
yarn add babel-jest@26.0. 0 jest@26.0. 0 ts-jest@26.44. -D
Copy the code
jest.config.js

Create a new configuration file for jest.config.js

const path = require('path')

module.exports = {
  rootDir: path.resolve(__dirname),
  clearMocks: true.coverageDirectory: 'coverage'.coverageProvider: 'v8'.moduleFileExtensions: ['vue'.'js'.'json'.'jsx'.'ts'.'tsx'.'node'].// Alias Settings
  moduleNameMapper: {
    '@ / (. *) $': '<rootDir>/src/components/$1'
  },
  preset: 'ts-jest'.testEnvironment: 'jsdom'.// Test the file
  testMatch: ['<rootDir>/src/__tests__/**/*.spec.(ts|tsx|js)'].testPathIgnorePatterns: ['/node_modules/'].moduleFileExtensions: ['js'.'json'.'ts'.'tsx'].transform: {
    '^.+\\.vue$': 'vue-jest'.'^.+\\.(ts|tsx|js|jsx)$': [
      'babel-jest', {
        presets: [['@babel/preset-env', { targets: { node: 'current'}}], ['@babel/preset-typescript']],plugins: ['@vue/babel-plugin-jsx'}]}}Copy the code
Add scripts command

Add the scripts command in package.json

{
    // others ...
    "scripts": {
        // others ...
        "test": "jest"}}Copy the code
test

At this point Jest configuration is complete, create a new test file to run down

// src/__tests__/helloworld/index.spec.js
import { mount } from '@vue/test-utils'
import HelloWorld from '@/HelloWorld.vue'

test('displays message'.async() = > {const wrapper = await mount(HelloWorld, {
    props: {
      msg: 'test msg'}})// Assert the rendered text of the component
  expect(wrapper.find('h1').text()).toBe('test msg')
  expect(wrapper.find('button').text()).toBe('count is: 0')
  await wrapper.find('button').trigger('click')
  expect(wrapper.find('button').text()).toBe('count is: 1')})Copy the code

The following one is run using vscode’s Jest Runner plugin