创建项目

运行以下命令

npm init vite@latest my-vue-app
复制代码

选择 vue

选择 vue-ts

生成的项目结构如下

项目框架搭建

配置 eslint

安装 eslint：npm install eslint --save-dev

生成 eslintrc.js 文件：npx eslint --init

配置 stylelint

安装依赖：

// package.json:
"devDependencies": {
    "sass": "1.49.9",
    "stylelint": "^14.5.3",
    "stylelint-config-prettier": "^9.0.3",
    "stylelint-config-standard": "^25.0.0",
    "stylelint-config-html": "^1.0.0",
    "stylelint-order": "^5.0.0",
    "stylelint-scss": "^4.1.0",
    "postcss-html": "^1.3.0",
    "postcss-scss": "^4.0.3",
},
复制代码

在项目根目录下新建 .stylelintrc.js 文件

// .stylelintrc.js:
module.exports = {
  root: true,
  customSyntax: "postcss-html",
  extends: [
    "stylelint-config-standard",
    "stylelint-config-prettier",
    "stylelint-config-html",
  ],
  rules: {
    "selector-class-pattern": null,
    "unicode-bom": "never",
    "no-descending-specificity": null,
  },
};
复制代码

拓展：
vue3 + vite 项目搭建 - 配置 stylelint (vue scss)
vue项目添加stylelint
vue已有项目，添加stylelint，规范代码