eslint prettier 配置

这篇具有很好参考价值的文章主要介绍了eslint prettier 配置。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.创建: pnpm create vite

2.自启浏览器;技巧01: package.json -> "dev": "vite" --> "dev": "vite" --> "dev": "vite --open"


一个项目要有统一的规范,需要使用eslint + stylelint + prettier来对我们的代码质量做检测和修复 eslint用于代码语法检测 stylelint用于对css代码进行语法检测 prettier用于代码格式规范 husky用于commit拦截,在代码提交前自动对代码进行格式 commitlint规范代码提交时的信息 preinstall统一包管理器工具

3.eslint 配置; 安装

pnpm i eslint -D 

生成配置文件 .eslint.cjs 指令

npx eslint --init 

安装 vue3 环境代码校验插件

pnpm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin-node @babel/eslint-parser

接着修改.eslintrc.cjs文件如下:

module.exports = {
    env: {
        browser: true,
        es2021: true,
        node: true,
        jest: true,
    },
    /* 指定如何解析语法 */
    parser: 'vue-eslint-parser',
    /* 优先级低于 parse 的语法解析配置 */
    parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
        parser: '@typescript-eslint/parser',
        jsxPragma: 'React',
        ecmaFeatures: {
            jsx: true,
        },
    },
    /* 继承已有的规则 */
    extends: [
        'eslint:recommended',
        'plugin:vue/vue3-essential',
        'plugin:@typescript-eslint/recommended',
        'plugin:prettier/recommended',
    ],
    plugins: ['vue', '@typescript-eslint'],
    // "off" 或 0    ===>    关闭规则
    // "warn" 或 1   ===>    打开的规则作为警告(不影响代码执行)
    // "error" 或 2  ===>    规则作为一个错误(代码不能执行,界面报错)
    rules: {
        'no-var': 'error',  //要求使用 let 或 const 而不是 var
        'no-multiple-empty-lines': ['warn', { max: 1 }], //不允许多个空行
        'no-console': precess.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-unexpected-multiline': 'error', //禁止空余的多行
        'no-useless-escape': 'off', //禁止不必要的转义字符
​
        '@typescript-eslint/no-unused-vars': 'error',   //禁止定义未使用的变量
        '@typescript-eslint/prefer-ts-expect-error': 'error', // 禁止使用 @ts-ignore
        '@typescript-eslint/no-explicit-any': 'off',    //禁止使用 any 类型
        '@typescript-eslint/no-non-null-assertion': 'off',
        '@typescript-eslint/no-namespace': 'off',   // 禁止使用自定义 TypeScript 模块和命名空间
        '@typescript-eslint/semi': 'off',
​
        'vue/multi-word-component-names': 'off', //要求组件名称始终为'-'链接的单词
        'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的变量<template>被标记为未使用
        'vue/no-mutating-props': 'off', // 不允许组件 prop 的改变
        'vue/attribute-hyphenation': 'off', // 对模板中的自定义组件强制执行属性命名样式
    }
}

创建.eslintingore配置文件:

dist
node_modules

package.json文件中新增两个运行脚本:

"scripts": {
    "lint": "eslint src", //校验src文件夹下的文件
    "fix": "eslint src --fix", //自动修补的意思
}

eslint和prettier一个保证js代码质量,一个保证代码美观

4.配置prettier:

安装:

pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier

添加.prettierrc.json文件,写入规则:

{
    "singleQuote": true,                
    "semi": false,
    "bracketSpacing": true,
    "htmlWhitespaceSensitivity": "ignore",
    "endOfLine": "auto",
    "trailingComma": "all",
    "tabWidth": 2
}

添加.prettierignore忽略文件:

/dist/*
/html/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*

通过pnpm run lint指令检测语法,如果出现不规范格式,就通过pnpm run fix修改文章来源地址https://www.toymoban.com/news/detail-842466.html

到了这里,关于eslint prettier 配置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3项目中简单实用的ESLint + Prettier配置

    一个中大型项目,一般由团队成员共同开发维护。而团队的成员都有自己的编码风格,导致整个项目的代码看上去很乱,很难维护。这时就需要我们的ESlint来进行限制。 一、使用vue-cli创建vue3项目 执行vue-cli的创建项目命令 在执行以上命令的时候,会有一步选择编码规范,如

    2024年02月12日
    浏览(44)
  • vue3+Vite+TS项目,配置ESlint和Prettier

    实操过的有两种方式 1.vue脚手架 2.vite(推荐,也是尤大大团队研发) 具体怎么新建一个vue3项目就不多讲了,可以按照官方文档来 创建后的文件目录长这样 多提一句,vite也会随着时间不断迭代,后续项目结构可能还会发生变化,当前使用的vue版本 和vite版本也一并贴出来 下

    2024年04月15日
    浏览(50)
  • vite vue3配置eslint和prettier以及sass

    教程 官网 vue-eslint ts-eslint 生成配置文件 安装其他插件 修改.eslintrc.cjs 添加.eslintignore 测试 也可以执行查看结果 官网 添加.prettierrc.cjs 添加.prettierignore https://stylelint.io/ 配置.stylelintrc.cjs 配置忽略文件.stylelintignore package.json增加配置 执行 yarn format 会自动格式化ts、js、html、js

    2024年01月23日
    浏览(51)
  • 【vue3-element-admin】ESLint+Prettier+Stylelint+EditorConfig 约束和统一前端代码

    本文介绍 vue3-element-admin 如何通过ESLint 检测 JS/TS 代码、Prettier 格式化代码、Stylelint 检测 CSS/SCSS 代码和配置 EditorConfig 来全方位约束和统一前端代码规范。 ESLint 可组装的JavaScript和JSX检查工具,目标是保证代码的一致性和避免错误。 ESLint 安装 安装 ESLint 插件 VSCode 插件市场

    2024年02月13日
    浏览(94)
  • 【vue3-element-admin】ESLint+Prettier+Stylelint+EditorConfig 约束和统一前端代码规范

    本文介绍 vue3-element-admin 如何通过ESLint 检测 JS/TS 代码、Prettier 格式化代码、Stylelint 检测 CSS/SCSS 代码和配置 EditorConfig 来全方位约束和统一前端代码规范。 ESLint 可组装的JavaScript和JSX检查工具,目标是保证代码的一致性和避免错误。 安装 ESLint 插件 VSCode 插件市场搜索 ESLint 插

    2023年04月17日
    浏览(84)
  • uniapp+vite+vue3+ts配置eslint代码检查及prettier规范检查

    首先要知道eslint与prettier的区别,ESLint 是一个用于检测 JavaScript 代码中的错误和潜在问题的工具。它只关注你写的代码是否正确,不会管你代码的格式;Prettier 则是一个代码格式化工具,它旨在确保代码在缩进、空格、换行、引号和分号等格式化方面遵循一致的规则,在

    2024年03月16日
    浏览(66)
  • VsCode中Vue代码格式插件,Vetur、ESLint 、Prettier - Code formatter的介绍使用及相关配置

    Vetur是一款Vue代码高亮显示的一款插件,在没有使用此插件前,以 .vue的文件名代码是没有颜色的!!! 安装步骤:在扩展商店中搜索(  Vetur  )点击安装  ESLint插件主要用来检测代码的语法格式,以便我们规范书写,避免因编译所发生的错误 。 安装步骤:在扩展商店中搜

    2024年02月16日
    浏览(35)
  • eslint prettier 配置

    1.创建: pnpm create vite 2. 自启浏览器;技巧01 : package.json - \\\"dev\\\": \\\"vite\\\" -- \\\"dev\\\": \\\"vite\\\" -- \\\"dev\\\": \\\"vite --open \\\" 一个项目要有统一的规范,需要使用 eslint + stylelint + prettier 来对我们的代码质量做检测和修复 eslint用于代码语法检测 stylelint用于对css代码进行语法检测 prettier用于代码格式规范

    2024年03月22日
    浏览(46)
  • 基于【ESLint+JavaScript Standard Style】标准的VUE/JS/html风格指南

    本规范是适用于小仙男团队及前端团队所搭建的各种前端框架代码的通用风格规范指南; 使用时,请遵循指南细则进行代码风格约束,并在提交之前确保进行代码风格的修正操作; 本规范参考WEB行业知名的JavaScript Standard Style 规范指南。并将在后续使用过程中,逐步进行符合

    2023年04月13日
    浏览(42)
  • Vue项目中代码规范(Prettier + ESLint)

    P r e t t i e r 用于统一代码格式,它主要关注代码外观,例如缩进、换行、引号等 Prettier用于统一代码格式,它主要关注代码外观,例如缩进、换行、引号等 P re tt i er 用于统一代码格式,它主要关注代码外观,例如缩进、换行、引号等 E S L i n t 用于代码质量和规范,它主要可

    2024年02月04日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包