vue2项目配置prettier + eslint + commitlint + stylelint

最新推荐文章于 2024-07-29 11:43:06 发布
最新推荐文章于 2024-07-29 11:43:06 发布
阅读量3.8k 收藏 24
点赞数 29
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sharon598/article/details/126782174
版权

目录

1、全局安装vue、vue-cli

2、安装commitlint

2.1、package.json中自动会新增如下配置

2.2、项目根目录自动新增commitlint.config.js文件，配置如下

 3、添加eslint提交检测

3.1、安装eslint-config-prettier、eslint-plugin-prettier、lint-staged

3.2、在根目录新增.eslintrc.js文件，具体配置需要根据项目自行配置，常用配置查看可以访问 https://blog.csdn.net/Sharon598/article/details/123333163 第4条，在这里，我就简单配置如下：

3.3、根目录新增lint-staged.config.js文件，配置如下：

3.4、package.json文件配置修改，配置如下：

3.5、配置.eslintignore文件，这个文件是配置哪些文件不需要eslint检测的，所以可以根据自己项目自行配置此文件，配置如下：

3.6、package.json文件配置lint脚本检测代码

4、添加prettier优化代码

4.1、添加.prettierrc.js文件，配置如下：

4.2、添加.prettierignore，可以根据项目需要，自行配置

4.3、lint-staged-config.js文件修改如下

4.4、package.json添加prettier脚本

5、添加stylelint提交检测配置

5.2、添加.stylelintignore文件，配置如下

5.3、添加.stylelintrc.js文件，配置如下

5.4、package.json添加stylelint脚本

1、全局安装vue、vue-cli

        vue2的项目，必须使用vue2对应得vue-cli的版本，vue-cli4.5以上对应的就是vue3了，所以：

npm install -g vue@2.7.10
npm install -g @vue/cli@4.4.6

2、安装commitlint

vue add commitlint

 执行完以后项目分别有以下变化

2.1、package.json中自动会新增如下配置

 

 

2.2、项目根目录自动新增commitlint.config.js文件，配置如下

 3、添加eslint提交检测

3.1、安装eslint-config-prettier、eslint-plugin-prettier、lint-staged

npm install --save-dev eslint-config-prettier eslint-plugin-prettier lint-staged

3.2、在根目录新增.eslintrc.js文件，具体配置需要根据项目自行配置，常用配置查看可以访问 https://blog.csdn.net/Sharon598/article/details/123333163 第4条，在这里，我就简单配置如下：

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    'eslint:recommended',
    'plugin:prettier/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

    'prettier/prettier': 'off'
  }
}

3.3、根目录新增lint-staged.config.js文件，配置如下：

module.exports = {
  '*.{js,vue}': [
    'vue-cli-service lint ./src --fix',
    'git add'
  ]
}

3.4、package.json文件配置修改，配置如下：

"husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  }

重启项目，在页面中随意定义一个变量，例如：

handleCancel() {
   let aaa = [];
   this.visible = false;
}

提交代码，报错如下:

3.5、配置.eslintignore文件，这个文件是配置哪些文件不需要eslint检测的，所以可以根据自己项目自行配置此文件，配置如下：

dist/*
node_modules/*
packages/*
public/*

3.6、package.json文件配置lint脚本检测代码

"scripts": {
    "lint": "eslint src/**/* --ext .js,.vue"
}

重启项目，执行npm run lint，项目就会检测哪些代码不符合要求

4、添加prettier优化代码

4.1、添加.prettierrc.js文件，配置如下：

module.exports = {
  // 超过80就换行
  printWidth: 80,
  // tab缩进大小，默认为2
  tabWidth: 2,
  // 使用tab缩进，默认false
  useTabs: false,
  // 使用分号，默认true
  semi: false,
  // 使用单引号, 默认false，(在jsx中配置无效, 默认都是双引号)
  singleQuote: true,
  // 行尾逗号，默认none，可选（none|es5|all），es5 包括es5中的数组、对象，all 包括函数对象等所有可选
  trailingComma: 'none',
  // 对象中的空格 默认true，true: { foo: bar }，false: {foo: bar}
  bracketSpacing: true,
  // JSX标签闭合位置 默认false
  jsxBracketSameLine: false,
  // 箭头函数参数括号 默认avoid 可选（avoid|always），avoid 能省略括号的时候就省略 例如x => x ，always 总是有括号
  arrowParens: 'avoid',
  // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
  ignorePath: '.prettierignore',
  // 在jsx中把'>' 是否单独放一行
  jsxBracketSameLine: false
}

4.2、添加.prettierignore，可以根据项目需要，自行配置

dist/*
node_modules/*
packages/*
public/*

4.3、lint-staged-config.js文件修改如下

module.exports = {
  '*.{js,vue}': [
    'vue-cli-service lint ./src --fix',
    'prettier --write ./src',
    'git add'
  ]
}

4.4、package.json添加prettier脚本

"scripts": {
    "lint:fix": "prettier src/**/* --write",
}

重启项目，执行npm run lint:fix，会发现项目中有不符合规范的代码，自动被修复了，pretter只会自动修复不影响逻辑的代码，影响逻辑的代码，需要手动修复

4.5、执行npm run lint:fix后，可能会在终端出现这种提示

 此时只需要，执行 git config core.autocrlf false 即可

5、添加stylelint提交检测配置

5.2、添加.stylelintignore文件，配置如下

dist/*
node_modules/*
packages/*
public/*

5.3、添加.stylelintrc.js文件，配置如下

module.exports = {
  // extends: ['stylelint-config-standard', 'stylelint-config-prettier', 'stylelint-config-html', "stylelint-config-standard-scss", 'stylelint-config-recommended-vue'],
  extends: [
    'stylelint-config-recommended',
    'stylelint-config-standard',
    'stylelint-config-recommended-vue',
    'stylelint-config-html',
    'stylelint-config-prettier'
  ],
  plugins: ['stylelint-order', 'stylelint-less'],
  ignorePath: '.stylelintignore',
  overrides: [
    {
      files: ['**/*.{html,vue}'],
      customSyntax: 'postcss-html'
    },
    {
      files: ['**/*.less'],
      customSyntax: 'postcss-less'
    }
  ],
  rules: {
    indentation: 2,
    'selector-pseudo-element-no-unknown': [
      true,
      {
        ignorePseudoElements: ['v-deep']
      }
    ],
    'number-leading-zero': 'never',
    'no-descending-specificity': null,
    'font-family-no-missing-generic-family-keyword': null,
    'selector-type-no-unknown': null,
    'at-rule-no-unknown': null,
    'no-duplicate-selectors': null,
    'no-empty-source': null,
    // 禁止空块
    'block-no-empty': true,
    'selector-pseudo-class-no-unknown': [
      true,
      { ignorePseudoClasses: ['global'] }
    ],
    'max-nesting-depth': null,
    'max-line-length': null,
    'selector-max-compound-selectors': null,
    'selector-no-qualifying-type': null,
    'selector-class-pattern': null,
    'function-parentheses-newline-inside': null,
    'alpha-value-notation': 'number',
    // 禁止空第一行
    'no-empty-first-line': true,

    'order/properties-order': [
      'position',
      'top',
      'right',
      'bottom',
      'left',
      'z-index',
      'display',
      'flex-wrap',
      'justify-content',
      'align-items',
      'float',
      'clear',
      'overflow',
      'overflow-x',
      'overflow-y',
      'padding',
      'padding-top',
      'padding-right',
      'padding-bottom',
      'padding-left',
      'margin',
      'margin-top',
      'margin-right',
      'margin-bottom',
      'margin-left',
      'width',
      'min-width',
      'max-width',
      'height',
      'min-height',
      'max-height',
      'font-size',
      'font-family',
      'font-weight',
      'text-justify',
      'text-align',
      'text-indent',
      'text-overflow',
      'text-decoration',
      'white-space',
      'color',
      'background',
      'background-position',
      'background-repeat',
      'background-size',
      'background-color',
      'background-clip',
      'border',
      'border-style',
      'border-width',
      'border-color',
      'border-top-style',
      'border-top-width',
      'border-top-color',
      'border-right-style',
      'border-right-width',
      'border-right-color',
      'border-bottom-style',
      'border-bottom-width',
      'border-bottom-color',
      'border-left-style',
      'border-left-width',
      'border-left-color',
      'border-radius',
      'opacity',
      'filter',
      'list-style',
      'outline',
      'visibility',
      'box-shadow',
      'text-shadow',
      'resize',
      'transition'
    ]
  }
}

5.4、package.json添加stylelint脚本

"scripts": {
    "stylelint:fix": "stylelint src/**/*.{html,vue,less} --fix"
}

重启项目，执行npm run stylelint:fix，不符合规定的样式，会被自动修复，但个别需要自行修复

沈梦研
关注
  • 29
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
记~Vite+Vue3+TypeScript + ESlint + CommitLint + Prettier + StyleLin + Element-plus 搭建项目基本框架
小白小白从不日别的博客
06-02 221
在style下创建scss相关的文件如下图主要看index.less里面的内容// 存放项目统一规范的变量// 自定义的 css 样式// 自定义主题样式// 修改 element-ui 样式修改入门的文件main.ts到这里一个基本的 基于 Vite+Vue3+TypeScript + ESlint + CommitLint + Prettier + StyleLin + Element-plus 的项目框架就搭建完成了。
Vite+Vue3项目集成ESLint+Prettier+Stylelint+Husky让项目规范起来
Web_boom的博客
01-16 1845
最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
Vue2老项目配置ESLint和Prettier
qq_44741577的博客
04-18 2450
接手一个老项目Vue2，由VueCli构建，需要集成一下ESLint和Prettier，保证代码规范。
ESLint规则配置说明
weixin_33713350的博客
01-07 376
1 "no-alert": 0,//禁止使用alert confirm prompt 2 "no-array-constructor": 2,//禁止使用数组构造器 3 "no-bitwise": 0,//禁止使用按位运算符 4 "no-caller": 1,//禁止使用arguments.caller或arguments.callee 5 "no-catch-shadow"...
vue2-04-利用VueCli脚手架搭建vue2项目步骤、目录解读、eslint缩进配置、自适应配置、less
最新发布
m0_64150479的博客
07-29 1110
利用VueCli脚手架搭建vue2项目详细过程，对创建好的vue2项目进行解释，都是啥，都有啥作用，html缩进和自动修复，px转rem，less
Eslint:新建vue2项目使用eslint，vue2项目eslint自动化，Eslint + standard标准+commitLint
weixin_43239880的博客
04-20 3533
新建vue2项目使用eslint，vue2项目eslint自动化，Eslint + standard标准+commitLint
Vue2项目中配置ESLint和Prettier
dreamingbaobei的博客
05-17 1万+
ESLint是js代码的质量检查工具，同时也具备一定的代码风格的格式化能力。 Prettier是一个代码风格的约束工具，Prettier能约束JS、JSX、TypeScript、Vue、CSS、Less、SCSS、HTML、JSON、Markdown等代码风格。 由于ESLint定义了一些js的代码格式化的约束，导致其与Prettier存在一些冲突。 如： ESLint默认语句结尾不加分号，Prettier默认语句结尾加分号； ESLint默认强制使用单引号，Prettier默认使用双引号； ESLint.
vue项目中配置 Eslint + Prettier
junjiehou的博客
04-12 799
本文章的配置的适合 vue-cli vue2 项目
在vue项目中配置eslint+prettier
Jiuto_crx的博客
12-18 2607
eslint+prettier 前提：配置eslint 方案一：vue-cli初始化vue项目并选择初始化eslint 方案二：自行百度eslint相关编辑器插件和项目依赖 安装prettier相关依赖 npm i --save-dev prettier eslint-plugin-prettier eslint-config-prettier prettier-eslint-cli 安装esli...
【vue基础篇】极简 ESLint + Prettier 配置教程
军火库
09-21 3480
删繁就简，字斟句酌，只写通俗易懂的文章；我曾在很长一段时间里，都没有搞清楚 ESLint 的正确配置方法。网上的文章质量也是一言难尽，造成了许多的误导。现在，我理清楚了 ESLint 的配置逻辑。撰写此文，以作日后查漏补缺之用，也希望能对同样迷惑的你带来帮助；亲测，历经多次测试。不管是在创建新项目，还是改造旧项目时，跟着教程进行配置都是 ok 的；node.js 版本是：v12.14.0npm 版本是：6.13.4vue-cli 版本是：vue/cli 4.5.11。
uni-app 配置 eslint + prettier + stylelint + lint-staged + husky 代码格式校验
SunSeekerX
05-25 5573
0x1 问题 公司需要用到uni-app开发新的项目，关于uni-app的介绍可以移步官网介绍。 核心就是用Vue写多端应用程序，但是uni-app的官方编辑器HbuilderX对代码校验这一块基本是空白。自己对Hbuilderx配置也是有点模糊。 用Vue-cli创建的项目默认启用了保存代码检查，但是uni-app开发方式有点区别。编译和打包集成到了工具内部。所以我们只能在提交代码之前来做代码校验了。 关于为什么要做代码校验，一个人开发还好。要是团队合作，没有统一的规则。你是天津狗不理，我是长沙臭豆腐。
vite+ts+eslint搭建vue3.0开发模版
flee-lether的博客
03-19 4361
创建项目文件夹，执行 npm 初始化命令 mkdir project cd project npm init -y 安装 vite npm i vite -D 安装 vite vue 支持 npm i vue@next @vue/compiler-sfc # vue框架 npm i -D @vitejs/plugin-vue # vite 解析vue文件 配置 vite vue 支持 新建 vite.config.js 文件 import * as path from 'path'; .
Nuxt3 实战 (二)：配置 Eslint、Prettierrc、Husky等项目提交规范(1)
2401_84181273的博客
05-03 238
scripts的坑比较多，如果大家在配置后发现不生效，可以自行百度解决一下。
前端prettier+eslint+stylelint+commitlint
weixin_45625609的博客
07-06 372
前段项目的prettier,eslint,stylelint,commitlint的实现
Eslint:已有vue2项目添加eslint自动格式化，Eslint (standard)+ Husky + Lint-staged+prettier
weixin_43239880的博客
04-20 4156
已有vue2项目添加eslint自动格式化，Eslint (standard)+ Husky + Lint-staged+prettier
Prettier + Vetur 进行Vue2项目代码格式化
热门推荐
huangpb的博客
08-01 1万+
Prettier 是一个代码格式化工具，它可以支持 js/jsx/ts/flow/json/css/less/scss 等文件格式。 为什么要使用 Prettier？ 用来替代 lint 中的一些场景，比如说分号/tab缩进/空格/引号，这些在lint工具检查出问题之后还需要手动修改，而通常这样的错误都是空格或者符号之类的，这样相对来说不太优雅，利用格式化工具自动生成省时省力。 VSCode...........................
关于 Vue2 .prettier 配置项
blog
07-17 3280
eslint，是一个语法检测工具，我们可以使用 prettier插件，实现自动格式化，得到一个符合 eslint 规则的文件，免去了手动格式化这一繁琐流程。 需要在开发工具中安装 eslint 和 prettier 插件。右键选择格式化文档的方式… - 选择 “Prettier - Code formatter” 在 vue 2 项目根目录中，创建一个名字为 .prettier 的文件，文件内
vue--02 Prettier格式化
qq_25672165的博客
03-27 1842
vue+eslint+prettierrc使用
VsCode中Vue代码格式插件，Vetur、ESLint 、Prettier - Code formatter的介绍使用及相关配置
qq_46255808的博客
02-21 3960
Vetur是一款Vue代码高亮显示的一款插件，在没有使用此插件前，以 .vue的文件名代码是没有颜色的！！！安装步骤：在扩展商店中搜索（ Vetur ）点击安装。
vue3+ts+eslint+prettierrc
01-18
在Vue3 + TypeScript + ESLint + Prettier的项目中，可以通过以下步骤来配置eslint和prettierrc： 1. 首先，确保你的项目已经安装了Vue CLI，并且已经创建了一个Vue3 + TypeScript的项目。 2. 在项目根目录下，打开终端并运行以下命令来安装ESLint和Prettier的相关依赖： ```shell yarn add eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier eslint-plugin-prettier -D ``` 3. 在项目根目录下，创建一个`.eslintrc.js`文件，并添加以下内容： ```javascript module.exports = { root: true, env: { node: true, }, extends: [ 'plugin:vue/vue3-essential', 'eslint:recommended', '@vue/typescript/recommended', 'prettier', 'prettier/@typescript-eslint', 'prettier/vue', ], parserOptions: { ecmaVersion: 2020, }, rules: { // 在这里添加你的自定义规则 }, }; ``` 4. 在项目根目录下，创建一个`.prettierrc.js`文件，并添加以下内容： ```javascript module.exports = { semi: true, singleQuote: true, trailingComma: 'all', printWidth: 80, tabWidth: 2, }; ``` 5. 在项目根目录下，创建一个`.eslintignore`文件，并添加以下内容： ``` node_modules/ dist/ ``` 6. 在项目根目录下，打开终端并运行以下命令来检查代码并修复格式错误： ```shell yarn lint --fix ``` 这样，你就成功配置了Vue3 + TypeScript + ESLint + Prettier的项目。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值