vite2.x + ts4.x + vue3.x 初使用

参考资料

• Prettier官网
• EsLint官网
• EsLint Rules
• vue3 + ts + EsLint + Prettier 规范代码
• VSCode中ESLint、Prettier 配置冲突问题原因及解决方案

项目配置

1.1 初始化

npm init @vitejs/app my-vue-app -- --template vue-ts

1.2 配置eslint

1.2.1 安装

npm i -D eslint

1.2.2 配置

npx eslint --init    

选择配置项

✔ How would you like to use ESLint? · problems                     ---选择To check syntax and find problems
✔ What type of modules does your project use? · esm                ---选择JavaScript modules (import/export)
✔ Which framework does your project use? · vue                     ---选择Vue.js
✔ Does your project use TypeScript? · No / Yes                     ---选择Yes
✔ Where does your code run? · browser, node                        ---多选Browser Node
✔ What format do you want your config file to be in? · JavaScript  ---选择JavaScript
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
✔ Would you like to install them now with npm? · No / Yes          ---选择Yes,开始安装依赖,并创建.eslintrc.js

配置规则~/.eslintrc.js

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        // "plugin:vue/essential", // ↓ 修改为 plugin:vue/vue3-essential ↓
        "plugin:vue/vue3-essential",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": 'vue-eslint-parser', // 新增
    "parserOptions": {
        "ecmaVersion": 13,
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    "plugins": ['vue', '@typescript-eslint'],
    "rules": {}
};

1.2.3 eslint忽略配置文件~/.eslintignore

#ESLint忽略指定文件或目录
index.html

1.3 配置Prettier(2种方式)

安装依赖

npm i -D prettier eslint-config-prettier eslint-plugin-prettier

1.3.1 使用Prettier推荐配置

vscode编辑器设置

// ~/.vscode/settings.json 
{
  "editor.formatOnSave": false, // 编辑器保存时自动格式化
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true  // 保存时使用eslint校验文件(会使用eslint规则自动格式化)
  }
}

eslint配置文件

// ~/.eslintrc.js
module.exports = {
  ...
  extends: [
    ...
    'plugin:prettier/recommended' // 使用prettier推荐配置
  ],
  ...
  rules: {
    ...
    'prettier/prettier': [
      'error',
      {
        // 覆盖prettier推荐配置,需要写在这里
        printWidth: 120,
        tabWidth: 4,
      }
    ],
    "@typescript-eslint/ban-ts-comment": "off", // ts忽略报错消除
  },
  globals: {
    defineProps: "readonly",
    defineEmits: "readonly",
    defineExpose: "readonly",
  },
};

1.3.2 使用自定义的Prettier配置

vscode编辑器设置

// ~/.vscode/settings.json 
{
  "editor.formatOnSave": true, // 编辑器保存时自动格式化
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true // 保存时使用eslint校验文件
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode" // 使用Prettier插件来美化代码
  }
}

1. 添加配置文件 ~/.prettierrc.js

module.exports = {
  printWidth: 120, // 换行字符串阈值
  tabWidth: 2, // 设置工具每一个水平缩进的空格数
  useTabs: false,
  semi: false, // 句末是否加分号
  vueIndentScriptAndStyle: true,
  singleQuote: true, // 用单引号
  trailingComma: 'none', // 最后一个对象元素加逗号
  bracketSpacing: true, // 对象，数组加空格
  jsxBracketSameLine: true, // jsx > 是否另起一行
  arrowParens: 'always', // (x) => {} 是否要有小括号
  requirePragma: false, // 不需要写文件开头的 @prettier
  insertPragma: false // 不需要自动在文件开头插入 @prettier
}

2. 将Prettier添加到EsLint中
   修改.eslintrc.js文件，在extends中增加

module.exports = {
  ...
  extends: [
    ...
    "prettier" // 放到最后,自定义的Prettier会覆盖前面的配置,不会报错
  ],
  ...

1.4 配置stylelint

安装依赖

npm i -D stylelint

配置stylelint.config.js;
插件和继承的配置都是npm包,按需安装并引入
安装配置依赖

npm i -D stylelint-order stylelint-scss stylelint-prettier stylelint-config-standard postcss-html stylelint-config-recommended-vue stylelint-config-recess-order stylelint-config-recommended-scss

// ~/stylelint.config.js
module.exports = {
  // stylelint-order 的作用是强制你按照某个顺序编写 css ; 
  // stylelint-scss scss语法规范插件
  plugins: ["stylelint-order", "stylelint-scss", "stylelint-prettier"],
  extends: [
    "stylelint-config-standard", // Stylelint 标准配置
    "stylelint-config-recommended", // Stylelint 推荐配置,兼容 prettier
    "stylelint-config-html", // postcss-html 支持.html文件配置
    "stylelint-config-recommended-vue", // postcss-html 支持.vue文件推荐配置
    "stylelint-config-recommended-vue/scss",
    "stylelint-config-recess-order", // stylelint-order 插件的第三方配置,自动调整顺序
  ],
  rules: {
    "at-rule-no-unknown": null,   // scss规范插件推荐规则
    "scss/at-rule-no-unknown": true,  // scss规范插件推荐规则
     indentation: 4, // css代码缩进4格
    "unit-case": null,
    "no-duplicate-selectors": null,
    "selector-class-pattern": /^[a-z-_]+$/,
  }
};

"stylelint-config-html" "stylelint-config-recommended-vue" "stylelint-config-recommended-vue/scss"这三个依赖于postcss-html,所以要安装它

vscode安装插件vscode-stylelint
插件扩展配置

// ~/.vscode/settings.json 
{
   "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true // 保存时stylelint格式化
  },
  // 禁用编辑器内置lint
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "stylelint.enable": true, // 启用stylelint
  "stylelint.validate": ["css", "scss", "vue"] // 插件默认只检测 css postcss文件
}