【vue3+ts项目】配置eslint校验代码工具,eslint+prettier+stylelint

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

1、运行好后自动打开浏览器

package.json中 vite后面加上 --open
【vue3+ts项目】配置eslint校验代码工具,eslint+prettier+stylelint,Vue3,vue.js

2、安装eslint

npm i eslint -D

【vue3+ts项目】配置eslint校验代码工具,eslint+prettier+stylelint,Vue3,vue.js

3、运行 eslint --init 之后,回答一些问题, 自动创建 .eslintrc 配置文件。

npx eslint --init

回答问题如下:

使用eslint仅检查语法,还是检查语法及错误,选第二个
【vue3+ts项目】配置eslint校验代码工具,eslint+prettier+stylelint,Vue3,vue.js
使用的是什么模块,选第一个
【vue3+ts项目】配置eslint校验代码工具,eslint+prettier+stylelint,Vue3,vue.js
项目使用的是什么框架,选vue
【vue3+ts项目】配置eslint校验代码工具,eslint+prettier+stylelint,Vue3,vue.js
项目中使用TyoeScript ,选yes
【vue3+ts项目】配置eslint校验代码工具,eslint+prettier+stylelint,Vue3,vue.js
项目运行在哪,选浏览器
【vue3+ts项目】配置eslint校验代码工具,eslint+prettier+stylelint,Vue3,vue.js
创建的配置类型需要什么类型的,选Javascript
【vue3+ts项目】配置eslint校验代码工具,eslint+prettier+stylelint,Vue3,vue.js
需要安装这些插件吗,检验ts语法,检验vue语法,选yes
【vue3+ts项目】配置eslint校验代码工具,eslint+prettier+stylelint,Vue3,vue.js
用什么包管理工具,我这里是npm
【vue3+ts项目】配置eslint校验代码工具,eslint+prettier+stylelint,Vue3,vue.js
安装完成
【vue3+ts项目】配置eslint校验代码工具,eslint+prettier+stylelint,Vue3,vue.js
项目中会多一个.eslintrc.cjs文件
【vue3+ts项目】配置eslint校验代码工具,eslint+prettier+stylelint,Vue3,vue.js

4、安装vue3环境代码校验插件

//让所有与prettier规则存在冲突的Eslint rules失效,并使用prettier进行代码检查
“eslint-config-prettier”: “^9.0.0”,
“eslint-plugin-import”: “^2.28.1”,
“eslint-plugin-node”: “^11.1.0”,
//运行更漂亮的Eslint插件,使prettier规则优先级更高,Eslint优先级低
“eslint-plugin-prettier”: “^5.0.0”,
//vue.js的Eslint插件(查找vue语法错误,发现错误指令,查找违规风格指南)
“eslint-plugin-vue”: “^9.17.0”,
//该解析器允许使用Eslint校验所有babel code
“@babel/eslint-parser”: “^7.22.10”,

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

【vue3+ts项目】配置eslint校验代码工具,eslint+prettier+stylelint,Vue3,vue.js

5、安装好后重新配置.eslintrc.cjs文件

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
    jest: true,
  },
  // 指定如何解析语法
  parser: "vue-eslint-parser",
  //优先级低于parse的语法解析配置
  parserOptions: {
    ecmaVersion: "latest",
    parser: "@typescript-eslint/parser",
    sourceType: "module",
    jsxPragma: "Recat",
    ecmaFeatures: {
      jsx: true,
    },
  },
  //   继承已有的规则
  extends: [
    "eslint:recommended",
    "plugin: @typescript-eslint/recommended",
    "plugin: vue/vue3-essential",
    "parser: pretter/recommended",
  ],
  overrides: [
    {
      env: {
        node: true,
      },
      files: [".eslintrc.{js,cjs}"],
      parserOptions: {
        sourceType: "script",
      },
    },
  ],
  /**
   * 'off' 或0  ==>关闭规则
   * 'warn'或1   ==>打开的规则作为警告
   * 'error'或2   ==>规则作为一个错误(代码不能执行,界面报错)
   */

  plugins: ["@typescript-eslint", "vue"],
  rules: {
    "no-var": "error", //要求使用let或const而不是var
    "no-multiple-empty-lines": ["warn", { max: 1 }], //不允许多个空行
    "no-console": process.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-users-vars": "error", //防止<script setup>使用的变量<template>标记为未使用
    "vue/no-mutating-props": "off", //不允许组件props的改成
    "vue/attribute-hyphenation": "off", //对模板中的自定义组件强制执行属性命名样式
  },
};

6、新建.eslintignore忽略文件,不需要校验

【vue3+ts项目】配置eslint校验代码工具,eslint+prettier+stylelint,Vue3,vue.js

7、添加运行脚本,package.json中添加,npm run lint 检查语法,npm run fix 修改错误语法

    "lint":"eslint src",
    "fix":"eslint src --fix"

【vue3+ts项目】配置eslint校验代码工具,eslint+prettier+stylelint,Vue3,vue.js

8、配置prettier

eslint保证js代码质量,prettier保证代码美观,统一格式,支持保护js在内的多种语言

npm install -D eslint-plugin-prettier eslint-config-prettier

【vue3+ts项目】配置eslint校验代码工具,eslint+prettier+stylelint,Vue3,vue.js

9、新增.prettier.json

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

10、新增.prettierignore

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

运行npm run lint,遇到报错

【vue3+ts项目】配置eslint校验代码工具,eslint+prettier+stylelint,Vue3,vue.js
把.eslintrc.cjs文件中所有的空格都删掉,比如rules中的空格

然后再运行npm run lint,又遇到报错
【vue3+ts项目】配置eslint校验代码工具,eslint+prettier+stylelint,Vue3,vue.js
【vue3+ts项目】配置eslint校验代码工具,eslint+prettier+stylelint,Vue3,vue.js
eslintrc.cjs文件中正确的是:
【vue3+ts项目】配置eslint校验代码工具,eslint+prettier+stylelint,Vue3,vue.js
现在可以了
【vue3+ts项目】配置eslint校验代码工具,eslint+prettier+stylelint,Vue3,vue.js
【vue3+ts项目】配置eslint校验代码工具,eslint+prettier+stylelint,Vue3,vue.js
执行npm run fix之后
【vue3+ts项目】配置eslint校验代码工具,eslint+prettier+stylelint,Vue3,vue.js
【vue3+ts项目】配置eslint校验代码工具,eslint+prettier+stylelint,Vue3,vue.js
再执行npm run lint之后,没有错误提示了
【vue3+ts项目】配置eslint校验代码工具,eslint+prettier+stylelint,Vue3,vue.js

11、安装stylint相关插件

npm add sass sass-loader stylelint postcss postcss-scss postcss-html stylelint-config-prettier stylelint-config-recess-order stylelint-config-recommended-scss stylelint-config-standard stylelint-config-standard-vue stylelint-scss stylelint-order stylelint-config-standard-scss -D

遇到报错
【vue3+ts项目】配置eslint校验代码工具,eslint+prettier+stylelint,Vue3,vue.js
这个报错的意思是stylelint的版本目前是14.16.1,stylelint-config-prettier@9.0.5需要stylelint的版本在11-15之间
stylelint-config-recess-order@4.3.0需要stylelint的版本大于等于15

单独安装stylelint-config-prettier和stylelint

npm add stylelint-config-prettier@9.0.5
npm add stylelint@12

单独安装stylelint-config-recess-order

npm add stylelint-config-recess-order@4.3.0

这里会报错,因为stylelint装的是版本12
【vue3+ts项目】配置eslint校验代码工具,eslint+prettier+stylelint,Vue3,vue.js
重新安装stylelint

npm add stylelint@15

警告还是有的,但不是err报错了
【vue3+ts项目】配置eslint校验代码工具,eslint+prettier+stylelint,Vue3,vue.js
然后再将剩余的安装上

npm add sass sass-loader postcss postcss-scss postcss-html stylelint-config-recommended-scss stylelint-config-standard stylelint-config-standard-vue stylelint-scss stylelint-order stylelint-config-standard-scss -D

安装成功,开始配置stylelint

12、stylelint是css的lint工具,可格式化css代码,检查css语法错误和不合理的写法,指定css书写顺序等 新增.stylelintrc.cjs配置文件

module.export = {
    //官网https://stylelint.bootcss.com/
    extends: [
        'stylelint-config-standard',//配置stylelint拓展插件
        'stylelint-config-html/vue',//配置vue中template样式格式化
        'stylelint-config-standard-scss',//配置stylelint scss插件
        'stylelint-config-recommended-vue/scss',//配置vue中scss样式格式化
        'stylelint-config-recess-order',//配置stylelint css属性书写顺序插件
        'stylelint-config-prettier',//配置stylelint和prettier兼容

    ],
    overrides: [
        {
            files: ['**/*.(scss|css|vue|html)'],
            customSyntax:'postcss-scss',
        },
         {
            files: ['**/*.(html|vue)'],
            customSyntax:'postcss-html',
        }
    ],
    ignoreFiles: [
        '**/*.js',
        '**/*.jsx',
        '**/*.tsx',
        '**/*.ts',
        '**/*.json',
        '**/*.md',
        '**/*.yaml',
    ],
    /**
     * null 关闭该规则
     * always 必须
     */
    rules: {
        'value-keyword-case': null,//在css中使用v-bind不报错
        'no-descending-specificity': null,//禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器
        'function-url-quotes': 'always',//要求或禁止URL的引号"always"必须加上引号,"never"没有引号
        'no-empty-source': null,//关闭禁止空源码
        'selector-class-pattern': null,//关闭强制选择器类名的格式
        'property-no-unknown': null,//禁止未知的属性,true为不允许
        'block-opening-brace-space-before': 'always',//大括号之前必须有一个空格或不能有空白符
        'value-no-vendor-prefix': null,//关闭属性值前缀  --webkit-box
        'property-no-vendor-prefix': null,//关闭属性前缀  --webkit-mask
        'selector-pseudo-class-no-unknown': [
            // 不允许未知的选择器
            true,
            {
                ignorePseudoClasses:['global','v-deep','deep'],//忽略属性,修改elememt默认样式的时候能使用到
            }
        ]
    }
}

13、新增.stylelintignore忽略文件

/dist/*
/html/*
/node_modules/*
/public/*

14、添加运行脚本,package.json中添加

      "format":"prettier --write\"./**/*.{html,vue,ts,js,jsom,md}\"",
      "lint:eslint":"eslint src/**/*.{ts,vue} --cache --fix",
      "lint:style":"stylelint src/**/*.{css,scss,vue} --cache --fix"

npm run format 会把代码直接格式化文章来源地址https://www.toymoban.com/news/detail-696280.html

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

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

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

相关文章

  • vite 创建vue3项目,使用 Prettier 统一格式化代码,集成 ESLint、Stylelint 代码校验规范

    在团队开发中,保持代码风格的一致性和代码质量的高度,对于项目的可维护性和可读性非常重要。为了实现这一目标,我们可以使用工具来自动格式化代码并进行代码校验,在开发过程中捕获潜在的问题,并提供修复建议。 本示例中,我们将使用 Vite 来创建一个新的 Vue

    2024年04月28日
    浏览(60)
  • vue3+ts项目02-安装eslint、prettier和sass

    项目创建 生成配置文件 安装其他插件 修改.eslintrc.cjs 添加.eslintignore https://prettier.io/ 添加.prettierrc.cjs 添加.prettierignore https://stylelint.io/ 配置.stylelintrc.cjs 配置忽略文件.stylelintignore package.json增加配置 执行 yarn format 会自动格式化css、js、html、json还有markdown代码

    2024年02月06日
    浏览(52)
  • vite+vue3+ts+eslint+prettier+husky+lint-stated 项目搭建

    项目搭建 创建初始项目 Node.js 版本 14.18+,16+ npm create vite@latest my-vue-app --template vue-ts 添加eslint eslint 初始化 npm init @eslint/config eslint初始化脚本,按自己的要求选择相应的eslint 配置,以下是我选择的配置项 ✔ How would you like to use ESLint? · style ✔ What type of modules does your project

    2024年02月08日
    浏览(54)
  • 前端工程化 | vue3+ts+jsx+sass+eslint+prettier 配置化全流程

    前端开发是一个工程化的流程。 包括持续集成、持续部署。 我认为集成 的第一方面就是开发,在前端项目开发中,需要保证代码格式规范的统一、代码质量、提交的规划。而这些要求需要通过各种插件来保证规范化和流程化开发。 如何配置这些插件,这些插件各自的功能是

    2024年02月12日
    浏览(40)
  • 基于Vue3+Vite+TS+ESLint+Prettier+Husky+lint-staged+commitlint+stylelint的项目构建

    博客后台管理系统使用后的是基于Vue3+Vite+TS+ESLint+Prettier的开发,具体项目构建如下 ESLint: 控制代码质量 Prettier: 控制代码风格 2.1、安装ESLint、Prettier相关相关包 eslint: ESLint的核心代码库 prettier: Prettier的格式化代码的核心代码库 eslint-config-airbnb-base: airbnb的代码规范(依赖pl

    2024年02月07日
    浏览(56)
  • 超级详细 最新 vite4+vue3+ts+element-plus+eslint-prettier 项目搭建流程

    系列文章目录 【element-plus】 table表格每行圆角解决方案 element也通用 【Vue3+Vite+Ts+element-plus】使用tsx实现左侧栏菜单无限层级封装 超级详细GitBook和GitLab集成步骤【linux环境】 1.1、项目创建 执行以下代码将vite将会自动生成初始的 vite4+vue3+ts的项目模板,pnpm、npm、yarn 选择一种执

    2024年02月04日
    浏览(74)
  • vue3项目中简单实用的ESLint + Prettier配置

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

    2024年02月12日
    浏览(44)
  • [GN] 使用vue3+vite+ts+prettier+eslint

    做到代码格式等统一,此时,esint和prettier就要登场了。 eslint是代码检测工具,可以检测出你代码中潜在的问题,比如使用了某个变量却忘记了定义。 prettier是代码格式化工具,作为代码格式化工具,能够统一你或者你的团队的代码风格。 = 安装prettier+eslint包,并做一系列的

    2024年01月16日
    浏览(57)
  • 从0搭建Vue3组件库(十一): 集成项目的编程规范工具链(ESlint+Prettier+Stylelint)

    欲先善其事,必先利其器。一个好的项目是必须要有一个统一的规范,比如代码规范,样式规范以及代码提交规范等。统一的代码规范旨在增强团队开发协作、提高代码质量和打造开发基石,所以每个人必须严格遵守。 本篇文章将引入 ESLint+Prettier+Stylelint 来对代码规范化。 ESLint

    2024年02月02日
    浏览(43)
  • vue3-eslint-prettier-czgit配置

    一:vue3 1.1 vue3创建 输入命令后根据提示选择,项目是ts所以必选typescript 1.2 安装依赖 1.3 运行 二:配置eslint 2.1 执行安装命令 2.2 初始化eslint 依次选择 2.3 依赖安装完成后,会生成 .eslintrc.cjs 配置文件 2.4 在 package.json 文件中的 script 中添加 lint 命令 2.5 执行 lint 命令 遇到这样

    2024年02月15日
    浏览(60)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包