项目代码标准化

eslint偏向于把控项目js、ts、vue等代码的质量;prettier偏向于js、ts、vue的代码风格;stylelint偏向于把控css代码风格的统一。

使用eslint

  • 初始化配置文件

    eslint init ->生成.eslintrc.js
    module.exports = {
    "env": {
    "browser": true,
    "es2021": true,
    "node": true
    },
    // eslint-config-xx,xx前的可以省略掉
    "extends":[
    "eslint:recommended",
    "plugin:vue/vue3-essential",
    "plugin:@typescript-eslint/recommended"
    ],
    //解析器,将代码转化成抽象语法树,然后由eslint等对树进行检查
    parser:"@typescript-eslint/parser",
    parserOptions:{
    ...
    },
    // 全局定义的宏,定义一些全局变量,使用时就会不报错
    global: {
    defineProps: "readonly"
    },
    // eslint-plugin可以省略
    plugins: ["vue", "@typescript-eslint"],
    settings{
    "import/resolver": {
    // 设置项目内别名
    alias:{
    map:[["@","./src"]]
    }
    },
    // 允许的扩展名
    "import/extensions":[".js",".jsx",".ts"]
    },
    rules:{
    // 自定义规则,覆盖extends中的第三方库的规则
    }
    }

使用prettier

  • 配置文件

    在根目录新建prettierrc.cjs文件
    module.exports= {
    // 一行最多多少个字符
    printWidth:80,
    // 使用2个空格缩进
    tabWidth:2,
    // 结尾是否需要分号
    semi: true,
    // 使用单引号
    singleQuote: true
    }

使用stylelint

  • 配置文件

    // 根目录新建.stylelintrc.cjs
    module.exports = {
    extends: [
    "stylelint-config-standard"
    ]
    }


相关推荐
十步杀一人_千里不留行34 分钟前
Google 登录集成教程(Web + Expo 移动端)
前端
gAlAxy...3 小时前
IntelliJ IDEA 四种项目构建:从普通 Java 到 Maven Web 项目
前端·firefox
my一阁4 小时前
2025-web集群-问题总结
前端·arm开发·数据库·nginx·负载均衡·web
会飞的小妖4 小时前
个人博客系统(十一、前端-简短的配置)
前端
念念不忘 必有回响5 小时前
nginx前端部署与Vite环境变量配置指南
前端·nginx·vite
JIngJaneIL5 小时前
篮球论坛|基于SprinBoot+vue的篮球论坛系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·篮球论坛系统
程序猿阿伟7 小时前
《首屏加载优化手册:Vue3+Element Plus项目提速的技术细节》
前端·javascript·vue.js
麦麦大数据7 小时前
D030知识图谱科研文献论文推荐系统vue+django+Neo4j的知识图谱|论文本文相似度推荐|协同过滤
vue.js·爬虫·django·知识图谱·科研·论文文献·相似度推荐
尘觉7 小时前
面试-浅复制和深复制?怎样实现深复制详细解答
javascript·面试·职场和发展
fruge9 小时前
Vue Pinia 状态管理实战指南
前端·vue.js·ubuntu