项目笔记

# Eslint

* 参考文档 * 【eslint英文文档】https://eslint.org/docs/user-guide/configuring * 【eslint中文文档】http://eslint.cn/docs/rules/

# .eslintrc.js

extends: [
    'eslint:recommended',
    'plugin:vue/recommended',
    'plugin:@typescript-eslint/recommended',
    './.eslintrc-auto-import.json', // 自动导入
    './config/.eslint-defaults' // 使用eslint格式化(右键选择)
  ],

1
2
3
4
5
6
7

常用的rules

'vue/no-multiple-template-root': 0, // template 下只能存在一个根元素
'vue/valid-v-for': 0, // 循环 v-bind:key取消
'vue/require-v-for-key': 0 // 循环 v-bind:key取消

1
2
3

# .eslint-defaults.js

使用eslint格式化(右键选择)

# .eslintrc-auto-import.json

.vscode/setting.json

// vscode 实现的效率功能
// 保存自动格式化代码
// 保存自动修复 eslint 错误
{
  // 代码保存时，自动格式化
  "editor.codeActionsOnSave": {
    //"source.fixAll": true  // 直接启动全局，不推荐，更对接根据每一个插件的精细化配置
    "source.fixAll.eslint": true, // 自动调用 eselint fix，修复 eslint 规则
    "source.fixAll.stylelint": true, // 开启stylelint自动修复
  },
  // Format On Type/对键入的信息格式化(键入一行后，就是输入“;”分号结束一行)
  "editor.formatOnType": true,
  // 文件保存时自动格式化粘贴的内容
  "editor.formatOnSave": true,
  // 自动格式化粘贴的内容
  "editor.formatOnPaste": true,
  // 使用 eslint 作为文档格式化工具
  "eslint.format.enable": true,
  // 文件什么时候触发保存，失去焦点时保存
  "files.autoSave": "onFocusChange",
  // eslint 应用到那些文件上
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue",
    "typescript",
    "typescriptreact"
  ],
  // 去到 autoimport 插件中，自动添加分号的功能
  "autoimport.useSemiColon": false,
  // js 格式化去除分号
  "javascript.format.semicolons": "remove",
  // 键入时，快速产生提示，解决编写 tailwind class 时，提示不及时问题
  "editor.quickSuggestions": {
    "strings": true
  },
  // 为 todo-tree 插件添加识别的标签
  "todo-tree.general.tags": [
    "BUG",
    "bug",
    "HACK",
    "hack",
    "FIXME", // 待修复的bug
    "fixme",
    "fix",
    "FEAT", // 待开发内容
    "feat",
    "TODO", // 待完善
    "todo",
    "???", // 看不懂的内容
  ],
  // stylelint配置，stylelint 默认识别 css 文件，sass，less 等文件的识别，通过 stylelint-scss 插件完成
  "stylelint.enable": true, // 【stylelint】启动 stylelint 插件
  "css.validate": false, // 【default】去除 vscode 默认 css 校验器，均交由 stylelint 处理
  "less.validate": false, // 【default】去除 vscode 默认 less 校验器，均交由 stylelint 处理
  "scss.validate": false, // 【default】去除 vscode 默认 scss 校验器，均交由 stylelint 处理
  // styelint 识别那些，那些文件会经过 stylelint 处理
  "stylelint.validate": [
    "css",
    "less",
    "postcss",
    "vue",
    "html",
    "scss",
    "sass"
  ],
  // stylelint 提供的快捷代码段，快捷生成stylelint 注释代码，如 `/* stylelint-disable-line rule */`
  "stylelint.snippet": [
    "css",
    "less",
    "postcss",
    "vue",
    "html",
    "scss",
    "sass"
  ],
  // 定义路径插件的映射关系
  "path-intellisense.mappings": {
    "@/": "${workspaceRoot}/src/",
    "@images": "${workspaceRoot}/src/assets/images",
  },
  // 拼写校验器，忽略特定单词
  "cSpell.ignoreWords": [
    "unref",
    "WxSPay",
    "Alipay",
    "eslint",
    "stylelint",
    "deleteable",
  ],
  // 拼写校验器，忽略特定文件检查
  "cSpell.ignorePaths": [
    "package.json",
    "package-lock.json",
    "node_modules",
    "vscode-extension",
    ".git/objects",
    ".vscode",
    ".vscode-insiders",
  ],
  // 配置保存时自动执行的命令，解决 stylelint 插件失效问题
  "emeraldwalk.runonsave": {
    "commands": [
      {
        "match": ".(vue|scss|css|less)",
        "cmd": "npx stylelint ${file} --fix"
      },
    ]
  },
  "flashOpen.filePath": "C:\\Users\\Adminstartor\\Desktop\\BaiduSyncdisk\\temp.md",
  "Notes.notesLocation": "C:\\Users\\Adminstartor\\Desktop\\BaiduSyncdisk",
  "editor.tabSize": 2,
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

# 打包器配置，配置别名

vite.config.js

	resolve: {
      alias: [
        {
          find: '@/',
          replacement: `${pathResolve('src')}/`,
        },
        {
          find: '@images',
          replacement: `${pathResolve('src/assets/images')}/`,
        },
      ],
    },

1
2
3
4
5
6
7
8
9
10
11
12

tsconfig.json

{
  "compilerOptions": {
  	"paths": {
      "@/*": [
        "./src/*"
      ],
      "@images/*": [
        "./src/assets/images*"
      ]
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12

.vscode/settings.json

 // 定义路径插件的映射关系
  "path-intellisense.mappings": {
    "@/": "${workspaceRoot}/src/",
    "@images": "${workspaceRoot}/src/assets/images",
  },

1
2
3
4
5

# tailwind class 提示

.vscode/settings.json

// 键入时，快速产生提示，解决编写 tailwind class 时，提示不及时问题
  "editor.quickSuggestions": {
    "strings": true
  },

1
2
3
4

插件

Tailwind CSS IntelliSense

项目配置

待研究

# ant design vue 时间组件星期月份英文

(解决方案)[http://events.jianshu.io/p/43b42ecec09a]

pack-lock.json，yarn-lock.json等等中的moment可能存在多个不同的版本，导致汉化的时候，只汉化了一部分
解决方案
删掉了pack-lock.json文件和node_modules文件夹
重新npm install 再npm start 就好了

上次更新: 2023/03/22, 20:18:37

← 笔记 ant design vue→