Vue3+TS项目，eslint、prettier安装配置
eslint和prettier的作用主要为：可以规范团队的代码风格。在实际项目中，团队的每个成员的编码习惯都差异，这极有可能造成，一个项目多个代码风格，这会造成代码阅读困难，后期维护难度大灯问题，这就须要配置下eslint和prettier。1.eslint
1.安装依赖
首先我们须要先安装 @eslint/create-config 插件：
pnpm install -D @eslint/create-config 提示我未安装eslint，按y，回车安装
Need to install the following packages:
eslint@8.57.0
Ok to proceed? (y) y 接下来执行初始化。
npx eslint --init 接下来会有弹出一些问题，可根据自身项目情况进行回答，期间会询问是否须要安装相应插件，y->回车。https://i-blog.csdnimg.cn/blog_migrate/e69f7bf8ff59a01165734fe45c3558e1.png
2.配置eslintrc
会在项目根目次下生成.eslintrc.cjs文件，然后对项目进行自己须要的配置
module.exports = {
// 使 eslint 支持 node 与 ES6
env: {
browser: true,
es2021: true,
node: true
},
// 引入推荐的语法校验规则
extends: [
'eslint:recommended',
'plugin:vue/vue3-recommended',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended'
],
overrides: [],
// 这里一定要配置对 先使用vue-eslint-parser 再使用@typescript-eslint/parser
// 先解析 <template> 标签中的内容 然后再解析 vue <script> 标签中的 TS 代码
// 选择使用的解析器
parser: 'vue-eslint-parser',
// 解析器的详细配置
parserOptions: {
// 使用最新版 ES 语法
ecmaVersion: 'latest',
// 使用 ESLint TS 解析器
parser: '@typescript-eslint/parser',
// 使用 ES 模块化规范
sourceType: 'module'
},
// 使用的插件
plugins: ['vue', '@typescript-eslint'],
// 自定义规则
rules: {
'@typescript-eslint/no-unused-vars': 'off',
indent: [
'error',
4,
{
SwitchCase: 1
}
],
'vue/multi-word-component-names': [
'error',
{
ignores: ['index', 'Header'] //需要忽略的组件名
}
],
'@typescript-eslint/no-var-requires': 'off',
'@typescript-eslint/no-explicit-any': 'off',
semi: 'off',
'@typescript-eslint/no-this-alias': 'off',
'eslintno-debugger': 'off',
'vue/no-unused-vars': 'off',
'vue/no-template-shadow': 'off',
'vue/require-v-for-key': 'off',
'vue/no-textarea-mustache': 'off',
'vue/no-v-html': 'off'
}
}; 3.配置下忽略文件eslintignore
在根目次下创建.eslintignore文件，清除一些文件夹
node_modules
*.md
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
Dockerfile
.eslintrc.js 4.配置package.json
然后配置下package.json中的启动命令，如许便可以执行 pnpm run lint:fix 来进行主动格式化代码。
"scripts": {
"dev": "vite --open",
"test": "echo \"Error: no test specified\" && exit 1",
"eslint:fix": "eslint --fix"
}, 2 prettier
1.安装 prettier 依赖
pnpm install -D prettier pnpm install -D eslint-config-prettier eslint-plugin-prettier 2.创建.prettierrc.js 文件
module.exports = {
"singleQuote": true,
"semi": false,
"bracketSpacing": true,
"htmlWhitespaceSensitivity": "ignore",
"endOfLine": "auto",
"trailingComma": "all",
"tabWidth": 2,
"printWidth": 100,
"useTabs": false,
"bracketSameLine": true,
"arrowParens": "always",
"vueIndentScriptAndStyle": false,
"singleAttributePerLine": false
} 3.创建 .prettierignore 文件
dist/
node_modules/
.vscode/
.idea/
/public/*
.local
**/*.svg
**/*.sh 4.配置package.json
{
"scripts": {
"lint:prettier": "prettier --write **/*.{js,json,tsx,css,less,scss,vue,html,md}"
}
}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]