Vite + TS + ESLint builds the Vue3.0 development template

Create the project folder and execute the NPM initialization command

mkdir project
cd project
npm init -y
Copy the code

Install vite

npm i vite -D
Copy the code

Install Vite vue support

npm i vue@next @vue/compiler-sfc # vue framework
npm i -D @vitejs/plugin-vue # vite parses vue files
Copy the code

Configure vite vue support

Create the vite. Config. js file

import * as path from 'path';
import { defineConfig } from 'vite';
import VuePlugin from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [VuePlugin()],
    resolve: {
        alias: {
            // Configure the alias
            The '@': path.resolve(__dirname, './src')}}});Copy the code

Add typescript support

npm i -D typescript @vuedx/typecheck @vuedx/typescript-plugin-vue
Copy the code

It doesn’t seem to matter if @vuedx/ Typecheck and @vuedx/typescript-plugin-vue are not installed. The description on NPM is a tool for checking vue projects from the command line. In my understanding it is generally used for Githooks.

Configuration tsconfig. Json

{
    "compilerOptions": {
        "target": "ESNEXT" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */."module": "ESNEXT" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */."jsx": "preserve" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */."isolatedModules": true /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */."lib": ["esnext"."dom"]./* Strict Type-Checking Options */
        "strict": true /* Enable all strict type-checking options. */./* Module Resolution Options */
        "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */."types": ["vite/client"] /* Type declaration files to be included in compilation. */.// "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
        "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */./* Advanced Options */
        "skipLibCheck": true /* Skip type checking of declaration files. */."forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */."paths": {
            "@ / *": ["./src/*"]}},"include": ["src/**/*.ts"."src/**/*.d.ts"."src/**/*.vue"]."exclude": ["node_modules"."dist"."public"."tests"]}Copy the code

New shims-vue.d.ts to make typescript support vUE files

declare module '*.vue' {
    import {Component} from 'vue';
    const _default: Component;
    export default _default;
}
Copy the code

Create a new entry file named index.html. Vite entry file is no longer JS, but regular HTML

<! DOCTYPEhtml>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <! Avoid compatibility mode in IE -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <! -- Enable webKit in 360 browser -->
        <meta name="renderer" content="webkit" />
        <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
        <title>Document</title>
    </head>
    <body>
        <div id="app"></div>
        <script type="module" src="./src/index.ts"></script>
    </body>
</html>
Copy the code

Create a new index.ts to initialize code with the vue3.0 project

import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
// Mount the node
app.mount('#app');
Copy the code

<template>
    <div>Hello vue3.0</div>
</template>
<script lang="ts">
export default {
    name: 'App'.setup(){}};</script>
Copy the code

At this point, the VUe3.0 project is complete. Next, we add some helper functions, such as esLint, prettier, etc.

Add esLint support and prettier support, here I chose the Alloy specification from Alloy team of Tencent for ESLint specification

npm i -D eslint babel-eslint eslint-config-alloy vue-eslint-parser eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier eslint-plugin-prettier
Copy the code

Since the vUE organization file method of Alloy specification is inconsistent with personal habits, some modifications have been made. The specific files are as follows:

module.exports = {
    extends: ['alloy'.'alloy/vue'.'alloy/typescript'.'prettier'].plugins: ['prettier'.'vue'].parser: 'vue-eslint-parser'.parserOptions: {
        parser: '@typescript-eslint/parser'.ecmaVersion: 2020.sourceType: 'module'.ecmaFeatures: {
            jsx: true}},env: {
        // Your environment variables (including several predefined global variables)
        //
        // browser: true,
        node: true
        // mocha: true,
        // jest: true,
        // jquery: true
    },
    settings: {
        'import/resolver': {
            alias: {
                map: [[The '@'.'./src']],
                extensions: ['.ts'.'.js'.'.jsx'.'.json'.'.vue']}}},globals: {
        // Your global variable (set to false to indicate that it cannot be reassigned)
        //
        // myGlobal: false
    },
    rules: {
        // Define your rules
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off'.'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'.'vue/component-tags-order': [
            'error',
            {
                order: ['template'.'script'.'style'}]}};Copy the code

Add the eslint formatting command

npx eslint --fix --ext src/**/*.{vue,less,css,scss}
Copy the code

Adding the formatting command for the prettier

npx prettier --write --loglevel warn src/**/*.{js,jsx,json,ts,tsx,css,less,scss,vue,html,md}
Copy the code

Add stylelint support

npm i -D stylelint stylelint-config-standard stylelint-order
Copy the code

Stylelint configuration files are as follows:

module.exports = {
    extends: ['alloy'.'alloy/vue'.'alloy/typescript'.'prettier'].plugins: ['prettier'.'vue'].parser: 'vue-eslint-parser'.parserOptions: {
        parser: '@typescript-eslint/parser'.ecmaVersion: 2020.sourceType: 'module'.ecmaFeatures: {
            jsx: true}},env: {
        // Your environment variables (including several predefined global variables)
        //
        // browser: true,
        node: true
        // mocha: true,
        // jest: true,
        // jquery: true
    },
    settings: {
        'import/resolver': {
            alias: {
                map: [[The '@'.'./src']],
                extensions: ['.ts'.'.js'.'.jsx'.'.json'.'.vue']}}},globals: {
        // Your global variable (set to false to indicate that it cannot be reassigned)
        //
        // myGlobal: false
    },
    rules: {
        // Define your rules
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off'.'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'.'vue/component-tags-order': [
            'error',
            {
                order: ['template'.'script'.'style'}]}};Copy the code

Adds the stylelint formatting command

npx stylelint --fix src/**/*.{vue,less,postcss,css,scss} --cache --cache-location node_modules/.cache/stylelint/
Copy the code

Add Git Commit specification support

npm i -D commitizen Use tools to generate commit messages that conform to the specification
npx commitizen init cz-conventional-changelog --save-dev --save-exact Initialize the project to use the CZ-Xconventional - Changelog adapter
npm i -D @commitlint/config-conventional @commitlint/cli Use the Commitlint tool to verify that the commit format complies with the specification
Copy the code

Configure commitLint using the traditional config configuration file, which is generated in the project root directory

/** * feat: new features * fix: bugfixes * docs: Updates ** * style: No changes to the code * refactor: Refactoring code (no new features, no bug fixes) * PERf: performance, experience optimization * test: New test cases or update existing tests * build: The main purpose is to modify the submission of the project build system (e.g. glUP, Webpack, rollup configuration, etc.) * CI: The main purpose is to modify the submission of the project continue integration process (e.g. Travis, Jenkins, GitLab CI, Circle, etc.) * chore: Other types that do not fall into these categories, such as build processes, dependency management * revert: rollback of an earlier commit */
module.exports = {
    extends: ['@commitlint/config-conventional'].rules: {
        'type-enum': [
            2.'always'['feat'.'fix'.'docs'.'style'.'refactor'.'perf'.'test'.'build'.'ci'.'chore'.'revert']],'subject-full-stop': [0.'never'].'subject-case': [0.'never']}};Copy the code

Add husky support (need to initialize git repository first)

git init
npm i -D husky
npx husky init
Copy the code

Configure comitizen hooks

Find the commit-msg file in the.husky folder (create it if it doesn’t exist) and add it on the last line

#! /bin/sh
. "$(dirname "$0")/_/husky.sh"
Just add the following line to the existing file
npx commitlint --edit The $1
Copy the code

The website says it can be added by command, but it doesn’t work in Windows 10

npx husky add .husky/commit-msg 'npx commitlint --edit "$1"'
Copy the code

Configure precommit formatting or convert related commands to NPM commands

Locate the pre-commit file in the.husky folder (create it if it doesn’t exist) and add it to the last line

#! /bin/sh
. "$(dirname "$0")/_/husky.sh"
Add the following command to the existing filenpx eslint --fix --ext src/**/*.{vue,less,css,scss} npx prettier --write --loglevel warn src/**/*.{js,jsx,json,ts,tsx,css,less,scss,vue,html,md} npx stylelint --fix src/**/*.{vue,less,postcss,css,scss} --cache  --cache-location node_modules/.cache/stylelint/ git add .Copy the code

Finally add editorConfig support

# EditorConfig is awesome: https://EditorConfig.org
# top-most EditorConfig file
root = true
[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
Copy the code

Vite + TS + ESLint builds the Vue3.0 development template

Related Posts

UseUpdateEffect. This is the third installment of the handwritten hooks series

Practical front-end debugging skills

JS separated linked lists