在VSCode中 使用 ESLint + Prettier检查代码规范及自动格式化前端Vue代码

简介: 般的代码格式化工作,ESLint完全可以胜任,为什么要用Prettier代替ESLint的代码格式化功能?简而言之,Prettier的代码格式化功能比ESLint更强大,配置更简单,通过配置,ESLint可以使用Prettier的代码规则进行校验,如果不配置好,会出现冲突,导致二者不能配合使用。下面详细介绍如何配置ESLint+Prettier在VSCode中开发Vue代码:

ESLint :代码检查+代码格式化工具。


Prettier:代码格式化工具。


一般的代码格式化工作,ESLint完全可以胜任,为什么要用Prettier代替ESLint的代码格式化功能?简而言之,Prettier的代码格式化功能比ESLint更强大,配置更简单,通过配置,ESLint可以使用Prettier的代码规则进行校验,如果不配置好,会出现冲突,导致二者不能配合使用。


下面详细介绍如何配置ESLint+Prettier在VSCode中开发Vue代码:


一、安装


1、安装 eslint 以及 prettier

npm i eslint prettier -D


2、安装eslint-plugin-prettier插件

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


3、在 VSCode中插件安装中搜索 ESLint、Prettier - Code formatter、Vetur(因为Prettier不能格式化vue文件的template,所以使用Vetur)、这三个插件并安装。


二、配置


可以在工程根木下执行命令 eslint --init 生成.eslintrc.js文件,当然也可以手动创建该文件,一共有四个文件:


.eslintignore:忽略代码检查的配置文件


.eslintrc.js:代码检查规则的配置文件


.prettierignore:忽略代码格式化的配置文件


.prettierrc:代码格式化的配置文件


1、.eslintignore配置文件如下:


node_modules/
**/*.spec.*
**/style/
*.html
/components/test/*
es/
lib/
_site/
dist/
package.json


2、.eslintrc.js配置文件如下:


module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    jasmine: true,
    jest: true,
    es6: true,
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
  extends: ['plugin:vue/essential', 'plugin:prettier/recommended'],
  plugins: ['vue', 'prettier'],
  rules: {
    'prettier/prettier': 'error',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  },
};


3、.prettierignore配置文件如下:


**/*.svg
node_modules/
package.json
lib/
es/
dist/
_site/
coverage/
CNAME
LICENlock
netlifSE
yarn.y.toml
yarn-error.log
*.sh
*.snap
.gitignore
.npmignore
.prettierignore
.DS_Store
.editorconfig
.eslintignore
**/*.yml
components/style/color/*.less
**/assets
.gitattributes
.stylelintrc
.vcmrc
.logo
.npmrc.template
.huskyrc


4、.prettierrc配置文件如下:


{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 100,
  "proseWrap": "never",
  "endOfLine": "auto",
  "overrides": [
    {
      "files": ".prettierrc",
      "options": {
        "parser": "json"
      }
    }
  ]
}


5、修改VSCode配置,文件->首选项->设置


微信图片_20220517124332.png

                                   clipboard.png


在设置页,点击右上角第一个按钮,打开setting.json,修改内容为:


{
    //保存自动格式化
    "editor.formatOnSave": true,
    //.vue文件template格式化支持,并使用js-beautify-html插件
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    // js-beautify-html格式化配置,属性强制换行
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-aligned"
        }
    },
    //保存时eslint自动修复错误
    "source.fixAll.eslint": true,
    //配置 ESLint 检查的文件类型
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ]
}


相关文章
|
5天前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
7天前
|
存储 前端开发 数据库
前端项目一键换肤vue+element(ColorPicker)
本文介绍了如何在前端项目中实现一键换肤功能,通过使用CSS变量和Element UI的颜色选择器组件(ColorPicker),并结合Vuex进行状态管理和持久化,实现主题颜色的动态切换。
24 3
前端项目一键换肤vue+element(ColorPicker)
|
4天前
|
存储 JavaScript 前端开发
前端 vue:路由的高级使用
前端 vue:路由的高级使用
|
4天前
|
资源调度 JavaScript 前端开发
前端vue:路由的基本使用
前端vue:路由的基本使用
|
1天前
|
前端开发 小程序 JavaScript
信前端里的循环显示如何编写代码?
信前端里的循环显示如何编写代码?
10 5
|
7天前
|
前端开发 JavaScript API
React、Vue.js 和 Angular前端三大框架对比与选择
前端框架是用于构建用户界面的工具和库,它提供组件化结构、数据绑定、路由管理和状态管理等功能,帮助开发者高效地创建和维护 web 应用的前端部分。常见的前端框架如 React、Vue.js 和 Angular,能够提高开发效率并促进团队协作。
24 4
|
12天前
|
JavaScript 前端开发 开发者
基于Vue.js的前端框架有哪些?
Vue.js 是一款流行的前端 JavaScript 框架,用于构建单页面应用(SPA)。除了 Vue.js 本身,还有许多基于 Vue.js 的前端框架和 UI 库,它们提供了更多的功能和组件,以便开发者能够快速构建应用程序。
19 6
|
14天前
|
机器学习/深度学习 数据采集 JavaScript
ADR智能监测系统源码,系统采用Java开发,基于SpringBoot框架,前端使用Vue,可自动预警药品不良反应
ADR药品不良反应监测系统是一款智能化工具,用于监测和分析药品不良反应。该系统通过收集和分析病历、处方及实验室数据,快速识别潜在不良反应,提升用药安全性。系统采用Java开发,基于SpringBoot框架,前端使用Vue,具备数据采集、清洗、分析等功能模块,并能生成监测报告辅助医务人员决策。通过集成多种数据源并运用机器学习算法,系统可自动预警药品不良反应,有效减少药害事故,保障公众健康。
ADR智能监测系统源码,系统采用Java开发,基于SpringBoot框架,前端使用Vue,可自动预警药品不良反应
|
7天前
|
JavaScript 前端开发 开发者
深入浅出 Vue.js:构建响应式前端应用
Vue.js 是一个流行的前端框架,以其简洁、高效和易学著称。它采用响应式和组件化设计,简化了交互式用户界面的构建。本文详细介绍 Vue.js 的核心概念、基本用法及如何构建响应式前端应用,包括实例、模板、响应式数据和组件等关键要素,并介绍了项目结构、Vue CLI、路由管理和状态管理等内容,帮助开发者高效地开发现代化前端应用。
|
20天前
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
下一篇
无影云桌面