vue项目中配置eslint和prettier

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

本文介绍eslint作用,基本配置,日常使用技巧

一、需要哪一个

eslint检查语法错误,格式问题并不重要

prettier是格式化工具,保证代码美观

vscode插件Eslint(务必安装),错误标红,保存的时候自动修正eslint错误

二、安装和配置

如果项目中一开始就没有配置,用下面的方法从零配置

若项目中已经有别人配好的,可根据需要修改规则

1、eslint

eslint插件,初始化,生成.eslintrc.js或者.eslintrc.json文件

在vue项目中使用,需要安装多一个插件eslint-plugin-vue

npm i -D eslint eslint-plugin-vue
//在终端执行如下命令
./node_modules/.bin/eslint --init
//按照提示初始化
//在src同级目录下会生成.eslintrc.js或者.eslintrc.json
--> 进行规则配置,写入rules

2、prettier

2.1 安装包

npm i -D prettier
npm i -D eslint-plugin-prettier
npm i -D eslint-config-prettier

2.2 修改package.json

加一句代码

"script": {
  "format": "prettier --write src/"
}

2.3 eslint修改

修改eslint文件,extends选项中加入"plugin: prettier/recommended"//用prettier必须写

"plugins"选项中加入prettier

2.4 配置prettier规则

按照如下三配置prettier规则

三、配置解析

1、package.json

package.json 里创建一个 eslintConfig属性,写规则(某些配置简单的项目会这么做)

eslintConfig: {
  "rules": []
}

2、.eslintrc.json

在src同级目录下新建.eslintrc.json文件,也可能是.eslintrc.js

2.1 JS的写法

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint: recommended"//这一句必须写
    "plugin:react/recommended", "standard"//根据用哪个框架,也需要安装vue/essential
    "plugin: prettier/recommended"//用prettier必须写
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint", "prettier", "vue"],//没有插件可以空着
  "rules": {}
}

常用的rules

rules: 
    {
      no-undef: 0,//使用未声名的变量
      no-unused-vars: 0//声名未使用
      quotes: [error, single]
      'vue/multi-word-component-names': 'off'//关闭eslint检查文件名是否为驼峰命名
    }

2.2 ts的写法

3、prettier配置

在src同级目录下新建.prettierrc.json,也可能是.prettierrc.js

module.exports = {
  tabWidth: 2,//两个空格
  jsxSingQute: true,
  printWidth: 100,//一行输入多少个字符
  singQute: true,
  semi: false,
  endOfLine: "crlf",
  overrides: [
    {
      files: '*.json',
      options: {
      	printWidth: 200
      }
    }
  ],
  allowParens: 'always'
}

四、eslint忽略

1、直接关闭

关闭所有文件的检查(一般不会用)

//vue.config.js 
module.exports = {     
        lintOnSave: false//eslint-loader 是否在保存的时候检查 
}

2、忽略某一个文件

将/* eslint-disable */放置于文件最顶部

/* eslint-disable */ 
my code

3、忽略某一段(行)

以分号结尾会报错,如果特殊必须用分靠结尾的,就忽略该段代码

/* eslint-disable */ 
<el-button 
  @click="handleClick(); //增长以分号结尾会报错
  handlePush();
  > 
/* eslint-enable */

//在js中应用,忽略某一行
my code // eslint-disable-line

关闭下一行的校验
// eslint-disable-next-line 
my code

4、对某一种规则启用或者禁用

不允许输入输出,变成允许

/* eslint-disable no-alert, no-console */ 
my code
/* eslint-enable no-alert, no-console */文章来源地址https://www.toymoban.com/news/detail-732654.html

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

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

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

相关文章

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

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

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

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

    2024年04月15日
    浏览(52)
  • Vue 项目eslint 配置编程风格(VScode)(1),讲的太清楚了

    安装之后你就可以看到目录里面有eslint 的配置文件: module.exports = { env: { browser: true, es2021: true }, extends: [ ‘plugin:vue/essential’, ‘standard’ ], parserOptions: { ecmaVersion: 12, sourceType: ‘module’ }, plugins: [ ‘vue’ ], rules: { } } 这里基本上eslint 就可以在项目里生效了,还需要自己风格配

    2024年04月12日
    浏览(43)
  • vscode编辑器,vue、小程序等语言适配eslint格式校验 + prettier 保存时自动修改格式

    目的:自留备份,用者自取 基础配置 1 基于vscode编辑器,prettier插件需要下载 2 eslint配置项规则: https://eslint.bootcss.com/docs/rules/ 3 prettier配置项规则: https://prettier.io/docs/en/options.html 安装插件 配置文件问题: 如果项目中带有.vscode文件夹,这里面的setting.json会覆盖全局的sett

    2024年02月09日
    浏览(57)
  • vue3项目+TypeScript前端项目—— vue3搭建项目+eslint+husky

    今天来带大家从0开始搭建一个vue3版本的后台管理系统。一个项目要有统一的规范,需要使用eslint+stylelint+prettier来对我们的代码质量做检测和修复,需要使用husky来做commit拦截,需要使用commitlint来统一提交规范,需要使用preinstall来统一包管理工具。 下面我们就用这一套规范

    2024年02月22日
    浏览(82)
  • Eslint:vue3项目添加eslint(standard规则)

    创建指令为:npm creat vite@latest 根据指令依次运行: 这样子我们就创建了一个纯净的vite+vue3+ts的项目模板,运行起来为: (1)安装eslint: npm install -D eslint (2)初始化eslint: npx eslint --init 在package.json中增加一句脚本用于检测和修复代码: 此时运行npm run lint,会看到这么一串

    2024年04月15日
    浏览(39)
  • vue3项目中关闭 eslint 检验

    关闭 eslint 检验 在 Vue 3 项目中,可以通过修改 package.json 文件或者配置 .eslintrc.js 文件来关闭 ESLint 检验。 修改 package.json 文件 在 package.json 文件中,找到 “lint” 命令,将其中的 eslint 删除即可。例如: 配置 .eslintrc.js 文件 在 Vue 3 项目中,ESLint 的配置文件默认是 .e

    2024年01月19日
    浏览(46)
  • 在 Vue3 项目中如何关闭 ESLint

    ESLint 是一个用于检查 JavaScript 代码质量的工具,它可以帮助开发者遵循一致的编码规范,并发现潜在的错误和问题。然而,在某些情况下,我们可能希望关闭 ESLint,例如在一些小型项目中或者在特定的开发阶段。本文将介绍如何在 Vue3 项目中关闭 ESLint。 第一步:找到配置文

    2024年02月08日
    浏览(58)
  • 基于vscode实现vue3项目创建启动+安装配置路由vue-router实现单页面组件切换

    访问https://nodejs.org/en,点击下载最新版本的nodejs,并安装。 在项目目录文件下,通过cmd运行下述指令。 依次输入下列命令,启动vue项目 在浏览器中加载http://localhost:5173/,页面加载成功,说明vue项目安装启动成功。 建议安装第三方库通过vscode中的终端来操作,项目启动通过

    2024年02月03日
    浏览(84)
  • 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日
    浏览(55)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包