当前位置：首页 > news >正文

vue3+ts+vite搭建脚手架（二）配置eslintprettier

news 来源：原创 2024/9/20 15:32:36

我们用vite创建好的脚手架是十分纯净的，我们可以自由配置一些自己想要的东西

1.安装 eslint 依赖

npm i eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin @vue/eslint-config-typescript -D

eslint：ESLint 的核心包。
eslint-plugin-vue：用于 Vue 文件的 ESLint 插件。
@typescript-eslint/parser：解析 TypeScript 文件。
@typescript-eslint/eslint-plugin：为 TypeScript 提供 ESLint 插件。
@vue/eslint-config-typescript

2.安装 prettier 依赖

npm i prettier @vue/eslint-config-prettier eslint-plugin-prettier -D

prettier：代码格式化工具。
eslint-config-prettier：禁用所有与 Prettier 格式化规则相冲突的 ESLint 规则。
eslint-plugin-prettier：将 prettier 作为 ESLint 规范来使用。

3.配置eslint、prettier相关文件

.eslintrc.js

module.exports = {root: true,parser: 'vue-eslint-parser',parserOptions: {parser: '@typescript-eslint/parser',sourceType: 'module'},extends: ['plugin:vue/vue3-recommended','eslint:recommended','plugin:@typescript-eslint/recommended','prettier','plugin:prettier/recommended'],rules: {'no-var': 'error',semi: 'off','@typescript-eslint/consistent-type-definitions': ['error', 'interface'],'@typescript-eslint/no-explicit-any': 'off','@typescript-eslint/no-var-requires': 0,'@typescript-eslint/no-require-imports': 'off','vue/multi-word-component-names': 'off','no-async-promise-executor': 'off','@typescript-eslint/no-empty-object-type': 'off','no-undef': 'off','@typescript-eslint/no-unused-vars': ['error',{vars: 'all',args: 'after-used',ignoreRestSiblings: false}],'vue/html-indent': ['error',2,{attribute: 1,baseIndent: 1,closeBracket: 0,alignAttributesVertically: true,ignores: []}],'vue/max-attributes-per-line': ['off'],'vue/no-setup-props-destructure': 'off',camelcase: ['error', { properties: 'always' }]}
}

.prettierrc.json

{"semi": false,"tabWidth": 2,"singleQuote": true,"printWidth": 100,"trailingComma": "none"
}

package.json文件添加两个脚本，用来在编译前检查一下代码

 "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore","prettier": "prettier --write src/"

package.json

{"name": "vite-project","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","build": "vue-tsc -b && vite build","preview": "vite preview","lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore","prettier": "prettier --write src/"},"dependencies": {"axios": "^1.7.7","lodash": "^4.17.21","mockjs": "^1.1.0","vue": "^3.4.37","vue-router": "^4.4.3"},"devDependencies": {"@types/lodash": "^4.17.7","@types/node": "^22.5.4","@typescript-eslint/eslint-plugin": "^8.5.0","@typescript-eslint/parser": "^8.5.0","@vitejs/plugin-vue": "^5.1.2","@vue/eslint-config-prettier": "^9.0.0","@vue/eslint-config-typescript": "^13.0.0","autoprefixer": "^10.4.20","eslint": "8.57.0","eslint-define-config": "^2.1.0","eslint-plugin-prettier": "^5.2.1","eslint-plugin-vue": "^9.28.0","path": "^0.12.7","postcss": "^8.4.45","prettier": "^3.3.3","tailwindcss": "^3.4.10","typescript": "^5.5.3","vite": "^5.4.1","vite-plugin-mock": "^3.0.2","vue-tsc": "^2.0.29"}
}