Это руководство о том, как настроить новый проект Vue 3 с вышеупомянутым техническим стеком, а также некоторыми дополнениями, которые действительно могут помочь в части DX (Developer Experience).
Рассмотрим такие вещи, как:
- Editorconfig
- ESLint
- Husky и lint-staged
- Алиасы путей
- Статическая проверка template с помощью vue-tsc
Создание рабочей среды
Для начала создаём новый проект (заменяем <project-name> на название создаваемой папки):
npm create vite@latest <project-name> -- --template vue-ts
Параметр --template vue-ts указывает, что будет создан проект на vuejs с уже настроенным typescript
Переходим в созданную папку:
cd <project-name>
И устанавливаем зависимости:
npm i
Настройка Editorconfig
root = true
[*]
indent_style = tab
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
charset = utf-8
[*.min.*]
indent_style = ignore
trim_trailing_whitespace = false
insert_final_newline = ignore
[*.{md,txt}]
indent_style = space
indent_size = 4
trim_trailing_whitespace = false
[Makefile]
indent_style = tab
[CHANGELOG.md]
indent_size = false
Дополнительная настройка для VS CODE
Для автоматической правки кода в vs code добавляем расширение в список рекомендуемых:
{
"recommendations": [
// ....
"EditorConfig.EditorConfig",
]
}
Настройка ESLint
npm i -D eslint eslint-plugin-vue @vue/eslint-config-typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin vue-eslint-parser vue-tsc@latest
{
"root": true,
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"plugin:vue/vue3-recommended",
"eslint:recommended",
"@vue/typescript/recommended"
],
"parser": "vue-eslint-parser",
"parserOptions": {
"ecmaVersion": "latest",
"parser": {
"ts": "@typescript-eslint/parser",
"<template>": "espree"
},
"sourceType": "module"
},
"plugins": [],
"ignorePatterns": ["dist/**/*", "node_modules/**/*"],
"rules": {
"indent": "off",
"@typescript-eslint/indent": [ "error", "tab" ],
"semi": [
"error",
"always"
],
"quotes": [
"error",
"double",
{
"avoidEscape": true,
"allowTemplateLiterals": true
}
],
"no-useless-escape": "off",
"vue/no-unused-vars": "error",
"vue/no-v-html": "off",
"vue/html-indent": [
"error",
"tab"
],
"@typescript-eslint/no-explicit-any": "off"
}
}
Это приведет к ошибке при сборке, поэтому мы изменим определение типа.
При установке последней версии vite данной ошибки не будет, так что этот пункт можно пропустить
declare module "*.vue" {
import type { DefineComponent } from "vue";
const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
export default component;
}
Теперь можем добавить в package.json скрипт для линтинга:
"scripts": {
"lint:script": "eslint --ext .ts,vue --ignore-path .gitignore ."
}
Данный скрипт будет только проверять без фикса ошибок, если нужно автоматически исправить ошибки, то скрипт можно запустить так
npm run lint:script --fix
Дополнительная настройка для VS CODE
Для автоматической форматирования кода в vs code добавляем расширение в список рекомендуемых:
{
"recommendations": [
// ....
"dbaeumer.vscode-eslint",
]
}
Чтобы отформатировать файл при сохранении используем следующую настройку:
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": [
"javascript",
"typescript",
"vue"
],
"eslint.options": {
"ignorePath": ".gitignore"
}
}
Настройка husky и lint-staged
Перед коммитов давайте запустим статическую проверку, чтобы убедиться, что вы не зафиксируете код содержащий ошибки.
npm i -D husky lint-staged
Добавляем следующее в package.json.
{
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{ts,vue}": "eslint --fix"
}
}
Это приведет к тому, что ESLint будет запускаться и проверять все файлы перед каждым коммитом, и если будет найдена ошибка, то коммит будет отменён.
Настройка Stylelint
yarn add -D stylelint stylelint-config-recommended stylelint-config-standard
{
"extends": ["stylelint-config-recommended", "stylelint-config-standard"]
}
Отредактируем package.json - добавим команды и lint-staged.
{
"scripts": {
"lint:style": "stylelint src/**/*.{css,scss,vue}"
},
"lint-staged": {
"*.{ts,tsx}": "eslint --fix",
"*.{css,scss,vue}": "stylelint --fix",
"*": "prettier -w -u"
}
}
Дополнительная настройка для VS CODE
Для автоматической форматирования кода в vs code добавляем расширение в список рекомендуемых:
{
"recommendations": [
// ....
"stylelint.vscode-stylelint",
]
}
Настройка алиасов путей
Импорт модуля по умолчанию является относительным, но вы хотите установить псевдоним, чтобы всегда ссылаться на один и тот же корень.
npm i -D @types/node@18.8.0
Используется версия типов ноды 18.8.0 так как в версии 18.8.5 при анализе vue кода показывается ошибка у event, например у @click. Возможно в более новой версии это уже пофиксили.
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";
export default defineConfig({
resolve: {
alias: {
"@": resolve(__dirname, "src")
}
},
plugins: [vue()]
});
Также изменим tsconfig.json.
{
"compilerOptions": {
//...
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
Теперь при импорте можно использовать псевдоним для пути:
<script setup lang="ts">
import HelloWorld from '@/components/HelloWorld.vue'
</script>
Настройка режима отладки
Добавляем файл .vscode/launch.json:
{
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "debug",
"type": "chrome",
"request": "launch",
"url": "http://localhost:5173",
"webRoot": "${workspaceFolder}/src"
}
]
}
Запускаем приложение через npm run dev. Затем запускаем режим отладки. Откроется браузер хром в режиме дебага.
Теперь ставим в файле точки остановки и начинаем debug.
Статическая проверка template с помощью vue-tsc
Вы можете статически проверять теги шаблона с помощью vue-tsc.
Он устанавливается при создании шаблона. Однако, начиная с @vue/runtime-dom@3.1.4, он не работает, если для параметра skipLibCheck в tsconfig.json не задано значение true.
{
"compilerOptions": {
//...
"skipLibCheck": true
},
}
{
"scripts": {
//...
"lint:markup": "vue-tsc --noEmit",
}
}
Рекомендуется запускать статические проверки в CI, а не перед фиксацией, поскольку статические проверки могут занимать довольно много времени по мере увеличения количества файлов Vue.
Добавление Tailwind CSS
Установка
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Настройка путей к шаблонам
Добавляем пути ко всем файлам шаблонов в файл tailwind.config.cjs.
module.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Добавление директивы Tailwind в CSS
Добавляем директивы @tailwind для каждого слоя Tailwind в файл ./src/style.css.
@tailwind base;
@tailwind components;
@tailwind utilities;