经验总结

  1. 首页 > 生活 > >

vue项目Eslint和prettier结合使用

生活百科

一、eslint介绍——代码语法检查工具Eslint是一个代码检查工具 ， 用来检查你的代码语法是否符合指定的规范,ECMAScript标准二、prettier插件——代码格式化工具prettier是一款优秀的代码格式化工具 ， 它并不关心你的语法是否正确 ， 只关心你的代码格式 ， 比如是否使用单引号 ， 语句结尾是否使用分号等等 ， 它可以把格式错乱的代码转化为符合标准的漂亮代码 ， prettier支持格式化的语言有：JavaScript ， TypeScript ， Flow ， JSX ， JSON ， CSS ， SCSS ， Less ， HTML ， Vue ， Angular ， GraphQL ， Markdown ， YAML 。prettier也开发了一款vscode的插件 ， 可以在vscode中搜索安装(更加建议在项目中安装prettier,因为这样可以在多人开发中保持代码风格一致)三、Vetur 插件——Vue代码高亮显示的一款插件四、Eslint 依赖4.1、babel-eslint——用于ESLint的Babel解析器的包装器babel-eslint现在是@babel/eslint-parserbabel是一个转码器 ， 比如可以将ES6的代码转换为ES5的代码 ， 从而在适配环境下运行我什么时候应该使用babel-eslint？ESLint的默认解析器和核心规则只支持最新的最终ECMAScript标准 ， 不支持Babel提供的实验性（如新特性）和non-standard（如流或TypeScript类型）语法 。babel-eslint是一个解析器 ， 它允许ESLint在Babel转换的源代码上运行 。使用:要使用babel-eslint ，  注意：官方文档中描述的4.2、eslint-plugin-vue——Vue.js的官方ESLint插件
eslint-plugin-vue可以用来检查<template>和.vue里的<script>错误并有效追踪提示 ， 非常方便定位安装: npm i eslint-plugin-vue -D4.3、@vue/cli-plugin-eslint——eslint 与 vue 整合包集体安装:五、prettier依赖5.1、 eslint-config-prettier ——解决Prettier和 ESLint的冲突处理方式:禁用掉了一些不必要的以及和 Prettier 相冲突的 ESLint 规则安装:npm install --save-dev eslint-config-prettier修改 eslintrc 文件,在 extends 部分加入 prettier 即可5.2、eslint-plugin-prettier——解决Prettier和 ESLint的冲突(更完美版)将prettier和eslint结合起来使用,这个插件的主要作用就是将 prettier 作为 ESLint 的规则来使用 ， 相当于代码不符合 Prettier 的标准时 ， 会报一个 ESLint 错误 ， 同时也可以通过 eslint --fix 来进行格式化,这样就相当于将 Prettier 整合进了 ESLint 中 。安装依赖:npm install --save-dev eslint-plugin-prettiernpm install --save-dev prettier修改 eslintrc 文件{5.3、prettier-eslint-cli这是一个CLI ， 允许您在一个或多个文件上使用安装: yarn add --dev prettier-eslint-cliprettier-eslint 与 prettier-eslint-cli 区别?

  • prettier-eslint 只能处理字符串
  • prettier-eslint-cli 能处理一个或多个文件
  • 默认情况下 ， prettier-eslint-cli 先运行 prettier ， 再运行eslint --fix
集体安装:六、配置Eslint在项目的根目录下 ， 新建.eslintrc.js 文件,例如:// .eslintrcmodule.exports = {plugins: ['prettier'],parser: "vue-eslint-parser",parserOptions: {sourceType: 'module',ecmaVersion: 2020,parser: 'babel-eslint',},rules: {'prettier/prettier': 'error',"parser": 0},extends: ['plugin:prettier/recommended'],};七、Prettier 配置,

经验总结扩展阅读


上一篇：变频空调和定频空调哪个好 变频和定频空调特点是什么

下一篇：秋分吃什么传统食物北方 秋分吃什么传统食物