Vue3+TS项目,eslint、prettier安装配置
在Vue3+TS项目中安装和配置eslint与prettier,你需要按照以下步骤操作:
- 安装eslint和prettier:
npm install eslint prettier eslint-plugin-vue @vue/eslint-config-standard --save-dev
- 安装eslint插件:
npm install eslint-plugin-prettier eslint-config-prettier --save-dev
- 在项目根目录下创建
.eslintrc.js
配置文件,并添加以下内容:
module.exports = {
root: true,
env: {
node: true,
},
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'plugin:prettier/recommended',
],
parserOptions: {
parser: '@typescript-eslint/parser',
},
rules: {
// 在这里添加或覆盖规则
},
};
- 创建
.prettierrc
配置文件,并添加以下内容:
{
"semi": false,
"singleQuote": true,
"trailingComma": "es5",
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"endOfLine": "auto"
}
- 在
package.json
中添加eslint和prettier的脚本:
{
"scripts": {
"lint": "eslint --ext .js,.vue,.ts,.tsx src",
"lint:fix": "eslint --fix --ext .js,.vue,.ts,.tsx src"
}
}
- 运行eslint检查和自动修复:
npm run lint
npm run lint:fix
以上步骤将会在你的Vue3+TS项目中安装eslint和prettier,并提供了基本的配置和命令来检查和格式化代码。根据项目需求,你可以在.eslintrc.js
和.prettierrc
中添加更多的配置来满足团队的代码风格规范。
评论已关闭