初学vue3-demo:https://github.com/Miofly/vue3-vite-vuex-demo
eslint
+ prettier
用于格式化与美化代码,从而达到项目代码统一的规范
所需安装包如下:
eslint + typescript + prettier 相关包
-
eslint
ESLint
的核心代码 -
eslint-loader
ESLint
加载器 -
@typescript-eslint/parser
ESLint
的解析器,用于解析typescript
,从而检查和规范typescript
代码 -
eslint-plugin-vue
解析
vue
模板 -
@vue/eslint-config-typescript
vue
中对typescript
写法的一些好的建议 -
@typescript-eslint/eslint-plugin
:这是一个
ESLint
插件,用于解析typescript
模版,包含了各类定义好的检测typescript
代码的规范 -
eslint-define-config
为.eslintrc.js文件提供defineConfig函数
-
prettier
prettier
插件的核心代码 -
eslint-config-prettier
解决
ESLint
中的样式规范和prettier
中样式规范的冲突,以prettier
的样式规范为准,使ESLint
中的样式规范自动失效 -
eslint-plugin-prettier
将
prettier
作为ESLint
规范来使用 -
eslint-define-config
在
.eslintrc.js
文件中,提供eslint
配置项的一些快捷提示,类型检查等 -
vue-eslint-parser
提供
vue
语法解析
带注释的 eslint
配置文件
// @ts-check
const { defineConfig } = require('eslint-define-config');
module.exports = defineConfig({
// 默认情况下,ESLint 会在所有父级目录里寻找配置文件,一直到根目录。如果你想要你所有项目都遵循一个特定的约定时,这将会很有用,但有时候会导致意想不到的结果。为了将 ESLint 限制到一个特定的项目,在你项目根目录下的 package.json 文件或者 .eslintrc.* 文件里的 eslintConfig 字段下设置 "root": true。ESLint 一旦发现配置文件中有 "root": true,它就会停止在父级目录中寻找。
// 此项是用来告诉eslint找当前配置文件不能往父级查找
root: true,
// 指定你想启用的环境
env: {
browser: true,
node: true,
es6: true,
},
// 设置解析器
parser: 'vue-eslint-parser',
// 解析器选项
parserOptions: {
parser: '@typescript-eslint/parser',
ecmaVersion: 2020,
sourceType: 'module',
jsxPragma: 'React',
ecmaFeatures: {
jsx: true,
},
},
// 扩展项
extends: [
'plugin:vue/vue3-recommended',
'plugin:@typescript-eslint/recommended',
// 'prettier',
// 'plugin:prettier/recommended',
'plugin:jest/recommended',
],
// 自定义规则配置
rules: {
'vue/script-setup-uses-vars': 'error',
// 禁止使用@ts-ignore来消除ESLint检查
'@typescript-eslint/ban-ts-ignore': 'off',
// 在函数和类方法上需要显式的返回类型
'@typescript-eslint/explicit-function-return-type': 'off',
// 禁止使用any类型
'@typescript-eslint/no-explicit-any': 'off',
// 除导入语句外,禁止使用require语句
'@typescript-eslint/no-var-requires': 'off',
// 禁止使用空函数
'@typescript-eslint/no-empty-function': 'off',
// 对自定义事件名称强制使用特定的大小写
'vue/custom-event-name-casing': 'off',
// 禁止定义前使用
'no-use-before-define': 'off',
// 在定义变量之前不允许使用变量
'@typescript-eslint/no-use-before-define': 'off',
// 禁止使用@ts-注解
'@typescript-eslint/ban-ts-comment': 'off',
// 禁止使用特定类型
'@typescript-eslint/ban-types': 'off',
// 禁止使用!后缀运算符进行非null断言
'@typescript-eslint/no-non-null-assertion': 'off',
// 在导出的函数和类的公共类方法上需要显式的返回值和参数类型
'@typescript-eslint/explicit-module-boundary-types': 'off',
// 禁止使用未使用的变量
'@typescript-eslint/no-unused-vars': [
'error',
{
argsIgnorePattern: '^_',
varsIgnorePattern: '^_',
},
],
// 禁止使用未使用的变量
'no-unused-vars': [
'error',
{
argsIgnorePattern: '^_',
varsIgnorePattern: '^_',
},
],
// 在函数括号前需要或不允许有空格
'space-before-function-paren': 'off',
// 强制属性顺序
'vue/attributes-order': 'off',
// 强制每个组件应位于其自己的文件中
'vue/one-component-per-file': 'off',
// 在标签的右括号之前要求或不允许换行
'vue/html-closing-bracket-newline': 'off',
// 强制每行的最大属性数
'vue/max-attributes-per-line': 'off',
// 在多行元素的内容之前和之后需要换行
'vue/multiline-html-element-content-newline': 'off',
// 在单行元素的内容之前和之后需要换行
'vue/singleline-html-element-content-newline': 'off',
// 在模板中的自定义组件上实施属性命名样式
'vue/attribute-hyphenation': 'off',
// 需要道具的默认值
'vue/require-default-prop': 'off',
// 实施自我封闭的风格
// 'vue/html-self-closing': 'off',
'vue/html-self-closing': [
'error',
{
html: {
void: 'always',
normal: 'never',
component: 'always',
},
svg: 'always',
math: 'always',
},
],
},
});
带注释的 prettier 配置文件
module.exports = {
/** 每行最多显示120个字符 */
printWidth: 100,
/** tab 缩进 */
tabWidth: 2,
/** 使用tab(制表位)缩进而非空格 */
useTabs: false,
/** 每行结束都加上分号 */
semi: true,
vueIndentScriptAndStyle: true,
/** 使用单引号 */
singleQuote: true,
quoteProps: 'as-needed',
/** 在对象,数组括号与文字之间加空格 "{ foo: bar }" */
bracketSpacing: true,
/** 所有可能的地方都加上逗号,比如数组、对象最后一个元素 */
trailingComma: 'all',
/** 在 jsx 中把 '>' 是否单独放一行 */
jsxBracketSameLine: false,
/** 在 jsx 中使用单引号代替双引号在 jsx 中使用单引号代替双引号 */
jsxSingleQuote: false,
/** 箭头函数参数只有一个时是否要有小括号。avoid:省略括号 always 始终拥有 */
arrowParens: 'always',
insertPragma: false,
requirePragma: false,
proseWrap: 'never',
htmlWhitespaceSensitivity: 'ignore',
/** 结尾是 \n \r \n\r auto */
endOfLine: 'auto',
};