一、创建项目

文档：cli.vuejs.org/zh/

1、全局安装vue-cli

npm install -g @vue/cli
# OR
yarn global add @vue/cli

2、创建项目

vue create vue3-eslint

创建时，建议自定义，创建的选项如下：

3、初始化时的文件

红圈是eslint ，需要的插件，尽量就下载这个版本，负责版本对不上，也可能无法使用

初始的package.json:

{
  "name": "vue3-webpack-ts-monorepo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "vue": "^3.2.13",
    "vue-router": "^4.0.3"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-standard": "^6.1.0",
    "@vue/eslint-config-typescript": "^9.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^5.1.0",
    "eslint-plugin-vue": "^8.0.3",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "typescript": "~4.5.5"
  }
}

4、下载Visual Studio Code插件

ESLint

Stylelint

Vue Language Features (Volar)

Error Lens

二、对关于eslint的文件进行改造

1、.eslintrc.js 对进行补充

/**
 * 官网： https://cn.eslint.org/docs/user-guide/getting-started
 * 规则查阅：https://cn.eslint.org/docs/rules/
 * 参考资料：
 http://tech.tea-culture.top/code/eslint/#eslint-%E8%A7%84%E5%88%99%E6%80%BB%E8%A7%88
 https://blog.csdn.net/image_fzx/article/details/118195141
 https://blog.csdn.net/weixin_57649833/article/details/120757938
 */
module.exports = {
    root: true,
    env: {
        node: true
    },
    extends: [
        'plugin:vue/vue3-essential',
        '@vue/standard',
        '@vue/typescript/recommended'
    ],
    parserOptions: {
        ecmaVersion: 2020
    },
    rules: {
        'vue/attribute-hyphenation': 0,
        // 自定义组件名称 - 驼峰和连字符
        'vue/component-definition-name-casing': 0,
        // html 闭括号-换行
        'vue/html-closing-bracket-newline': [2, {
            singleline: 'never',
            multiline: 'always'
        }],
        // html 闭括号之前无空格
        'vue/html-closing-bracket-spacing': 2,
        // html 需要有结束标签，除了自闭合标签
        'vue/html-end-tags': 2,
        // 缩进html
        'vue/html-indent': ['error', 4, {
            attribute: 1,
            baseIndent: 1,
            closeBracket: 0,
            alignAttributesVertically: true,
            ignores: []
        }],
        'vue/max-attributes-per-line': [2, {
            singleline: 4,
            multiline: 4
        }],
        // 禁止组件已注册但未使用的情况
        'vue/no-unused-components': [2],
        'no-multiple-empty-lines': 2,
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-constant-condition': 2, // 禁止在条件中使用常量表达式 if(true) if(1)
        'no-trailing-spaces': 1, // 一行结束后面不要有空格
        'no-var': 2, // 禁用var，用let和const代替
        'consistent-this': [2, 'that'], // this别名
        indent: ['error', 4],
        'no-dupe-args': [2],
        // 文件的最大行数
        'max-lines': ['error', {
            max: 600,
            skipBlankLines: true, // 忽略空白行
            skipComments: true // 忽略只包含注释的行
        }],
        // 遇见对象花括号换行
        'object-curly-newline': ['error', {
            ObjectExpression: 'always',
            ObjectPattern: {
                multiline: true
            },
            ImportDeclaration: 'never',
            ExportDeclaration: {
                multiline: true, minProperties: 3
            }
        }]
    }
}

2、.editorconfig

root = true
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 4
trim_trailing_whitespace = true
insert_final_newline = true
#是否删除行尾的空格
trim_trailing_whitespace = true
#是否在文件的最后插入一个空行
insert_final_newline = true

3、设置项目的 settings.json

编辑器使用vsc为例，在项目下创建 .vscode ——> settings.json

{
    "commentTranslate.source": "Bing",
    /* eslint */
    "eslint.run": "onSave",
    "editor.formatOnSave": false,
    // 要格式化的文件类型
    "eslint.validate": [
        "typescript",
        "typescriptreact",
        "javascript",
        "tsx",
        "vue",
        "html"
    ],
    "editor.tabSize": 4,
    "eslint.alwaysShowStatus": true,
    "stylelint.validate": [
        "css",
        "less",
        "postcss",
        "scss",
        "vue",
        "sass"
    ],
    //不索引一些不必要索引的大文件夹以减少内存和CPU消耗
    "search.exclude": {
        "**/.git/objects/**": true,
        "**/node_modules/**": true,
        "**/dist/**": true
    }
}

三、使用 stylelint 格式化vue中的css代码

1、在 .vscode ——> settings.json 加入 stylelint.validate 中的代码

{
    /* eslint */
    "eslint.run": "onSave",
    "editor.codeActionsOnSave": {
        "source.fixAll": true,
    },
    "editor.formatOnSave": true,
    // 要格式化的文件类型
    "eslint.validate": [
        "typescript",
        "typescriptreact",
        "javascript",
        "tsx",
        "vue",
        "html"
    ],
    "stylelint.validate": [
        "css",
        "less",
        "postcss",
        "scss",
        "vue",
        "sass"
    ],
    "editor.tabSize": 4,
    "eslint.alwaysShowStatus": true
}

2、下载stylelint的插件

注：建议直接复制过去用,复制到 package.json 中

"stylelint": "^13.13.1",
"stylelint-config-standard": "^22.0.0",
"stylelint-scss": "^3.21.0",

3、在根目录下创建 .stylelintrc.js 文件

/**
* https://chinese.freecodecamp.org/news/vscode-vite-vue3-ts-eslint-stylelint-automatic-code-formatting/
*/
module.exports = {
    extends: 'stylelint-config-standard',
    rules: {
        'indentation': 4,
        'selector-pseudo-element-no-unknown': [
            true,
            {
                ignorePseudoElements: ['v-deep']
            }
        ],
        'number-leading-zero': 'never',
        'no-descending-specificity': null,
        'font-family-no-missing-generic-family-keyword': null,
        'selector-type-no-unknown': null,
        'at-rule-no-unknown': null,
        'no-duplicate-selectors': null,
        'no-empty-source':null,
        'selector-pseudo-class-no-unknown': [true, { ignorePseudoClasses: ['global'] }]
    }
}

注：记得重启vsc。