搜索ESLint、stylelint、Prettier、Volar并安装,如果有安装Vetur,请禁用
按下ctrl+shift+p
,输入setting.json,选择首选项:打开设置(json)
,插入如下设置
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
},
"stylelint.enable": true,
// 默认使用prettier格式化支持的文件
"editor.defaultFormatter": "esbenp.prettier-vscode",
// 自动设定eslint工作区
"eslint.workingDirectories": [{ "mode": "auto" }],
"eslint.alwaysShowStatus": true,
"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
yarn create vite
或
npm create vite@latest
或
pnpm create vite
安装中选择Vue,TypeScript
yarn add --dev eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin vue-eslint-parser
或
npm install eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin vue-eslint-parser --save-dev
或
yarn add -D eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin vue-eslint-parser
新建.eslintrc.js
module.exports = {
root: true,
env: {
node: true,
},
parser: "vue-eslint-parser",
parserOptions: {
parser: "@typescript-eslint/parser",
ecmaVersion: 2021,
sourceType: "module",
ecmaFeatures: {
jsx: true,
},
},
extends: [
"plugin:vue/vue3-recommended",
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended",
"prettier",
],
rules: {},
};
新建.prettierrc
{
"endOfLine": "auto"
}
vite.config.ts添加
resolve: {
alias: [
{
find: "@",
replacement: "/src",
},
],
},
tsconfig.json添加
"paths": {
"@/*": ["./src/*"]
},
yarn add --dev sass
或
pnpm add -D sass
yarn add --dev stylelint stylelint-config-standard stylelint-config-recess-order stylelint-scss
或
pnpm add -D stylelint stylelint-config-standard stylelint-config-recess-order stylelint-scss
新建stylelint.config.js
module.exports = {
extends: ["stylelint-config-standard", "stylelint-config-recess-order"],
plugins: ["stylelint-scss"],
rules: {
"at-rule-no-unknown": null,
"scss/at-rule-no-unknown": true,
},
};
vite.config.ts中加入
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "@/styles/variables";`,
},
},
},
vite.config.ts中配置
build: {
terserOptions: {
compress: {
keep_infinity: true,
drop_console: true,
drop_debugger: true,
},
},
chunkSizeWarningLimit: 1200,
},
yarn add --dev rollup-plugin-visualizer
或
pnpm add -D rollup-plugin-visualizer
vite.config.ts中配置
import { visualizer } from "rollup-plugin-visualizer";
build: {
rollupOptions: {
plugins: [visualizer()],
},
},
pnpm add @unocss/reset
pnpm add -D unocss
vite.config.ts中配置
import Unocss from "unocss/vite";
plugins: [
Unocss(),
],
main.ts中配置
import "@unocss/reset/normalize.css";
import "uno.css";
pnpm add -D vite-plugin-imp
vite.config.ts中配置
import vitePluginImp from "vite-plugin-imp";
plugins: [
vitePluginImp()
],
pnpm add -D @vitejs/plugin-legacy terser
vite.config.ts中配置
import legacy from '@vitejs/plugin-legacy';
plugins: [
legacy({
targets: ['defaults', 'not IE 11']
})
],