vscode 配置eslint和prettier正确方法

ESlint

ESLint 是一款语法检测工具。因为 JavaScript 本身是一门灵活的动态语言，一千个 JavaScriptor 就有一千种写法。为了方便人们的理解，快速上手别人的代码。

说明

在开发项目的时候，往往会通过eslint来检查代码格式，而prettier用来进行代码的格式化。本篇博文主要是记录使用vscode开发vue项目时的eslint和prettier的配置。

vscode 安装插件

首先，需要在vscode上安装eslint和prettier的插件。


项目中的配置文件

在vue项目中，.eslintrc.js文件主要负责eslint的相关配置。

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    quotes: ['error', 'single', { allowTemplateLiterals: true }], // 单引号 允许使用反引号
    semi: ['error', 'never'], // 禁止末尾使用分号
  },
};

关于更多的eslint规则，可以点击这里查看。

.prettierrc.js文件负责prettier的规则设置：

module.exports = {
  tabWidth: 2,  // tab
  semi: false,  // 结尾不用分号
  singleQuote: true,  // 使用单引号
  bracketSpacing: true,  // 对象属性前后加空格
  disableLanguages: ['vue'],  // 不格式化vue文件
}

prettier

prettier 是一个代码格式化插件。它并不关心你的语法是否正确，只关心你的代码格式，比如是否使用单引号，语句结尾是否使用分号等等。

关于prettier更多详细的规则，可以点击这里查看。

保存自动格式化

如果希望在vscode中文件保存后就自动格式化，可以在设置中进行如下的设置：

或者在settings.json中添加下面的内容也可以做到保存格式化：

到此这篇关于vscode 配置eslint和prettier的文章就介绍到这了,更多相关vscode 配置eslint和prettier内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vscode 使用Prettier插件格式化配置使用代码详解

    参考 使用ESLint+Prettier来统一前端代码风格 vscode 配置vue+vetur+eslint+prettier自动格式化功能 问题描述 最近用Nodejs + express 写了一个zip文件上传的功能,代码给了别人看,各种吐槽,代码不规范,没有按照eslint,编辑器打开就是各种红色提醒,当然还有其他许多- 第一反应就是反感,后面冷静一想,还是自己做事的态度有问题,做完了功能已经完成了95%,为什么不到最后一步一键格式化,做到百分百呢?反思中 为了让以后代码美观,不让别人吐

  • vscode 配置vue+vetur+eslint+prettier自动格式化功能

    该配置用于vue开发,最终效果是保存时自动根据eslint对js.html和css代码进行格式化. vscode Vetur插件 Vetur插件用于识别vue文件,原本vetur自带格式化功能,但是和eslint会有冲突,所以没用上. vscode ESlint插件 Eslint插件用于根据工程目录的.eslintrc.js配置文件在编辑器中显示一些错误提示,后面的自定格式化根据这里的错误提示进行格式化操作. 基于vue-cli创建的项目 以下相关步骤需要注意: 创建的时候把Linter/For

  • 详解Vscode中使用Eslint终极配置大全

    详解Vscode中使用Eslint终极配置大全

    在 vue项目中使用vscode编辑时,使用了如下这套配置,保存时就会根据既定vue项目中.eslintrc.js文件设置的既定规则自动校验并依据规则修复代码. 需安装插件 主要是这两个插件: ESLint Prettier - Code formatter 个人现用vscode插件截图.png vscode中setting.json中配置 { // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, /

  • vscode中eslint插件的配置（prettier配置无效）

    用vue-cli构建vue项目,会有个eslint代码检测的安装 可vscode自带代码格式化是prettier格式(右键有格式化文件或alt+shift+f) 这时候要在vscode上装一个eslint插件 装完后在文件----->首选项------->设置里找到settings.json(快捷键忘了) eslint配置如下,(配置的·具体详情还有待研究,我也是网上copy的,不过亲测可用).保存配置后每次写.vue文件只要control+s保存,就可以把代码格式改成符合eslint标准 &

  • vscode 配置eslint和prettier正确方法

    vscode 配置eslint和prettier正确方法

    ESlint ESLint 是一款语法检测工具.因为 JavaScript 本身是一门灵活的动态语言,一千个 JavaScriptor 就有一千种写法.为了方便人们的理解,快速上手别人的代码. 说明 在开发项目的时候,往往会通过eslint来检查代码格式,而prettier用来进行代码的格式化.本篇博文主要是记录使用vscode开发vue项目时的eslint和prettier的配置. vscode 安装插件 首先,需要在vscode上安装eslint和prettier的插件. 项目中的配置文件

  • VSCode配置C语言环境的方法

    VSCode配置C语言环境的方法

    VSCode配置C语言环境 VSCode是一款强大编辑器,开源,免费,海量插件,支持很多编程语言.其中的很多功能可以大大地提高我们的学习与工作效率,现在本文介绍如何在VSCode上配置C语言环境. 1.下载安装 VSCode下载官网:https://code.visualstudio.com/ 下载完成之后安装在默认位置或者自定义位置 下面全部选择 然后是编译环境,我们选择gcc. 下载地址:https://sourceforge.net/projects/mingw-w64/files/ 打开

  • VSCode 配置C++开发环境的方法步骤

    第一步.安装VSCode应用程序 打开VSCode官网,下载对应安装包并默认安装(这里指明:安装路径可以修改) 第二步.安装相关插件 此时的VSCode仅仅是一个英文文本编辑器,还称不上开发工具,所以需要相关的插件支持. 需要说明的是:这里我选择我的母语作为编辑器的语言,所以会多安装一个汉化插件! 安装 汉化插件 打开VSCode,在插件搜索输入框输入"Chinese",搜索插件"Chinese (Simplified) Language Pack for Visual St

  • vscode 配置 python3开发环境的方法

    vscode来写python,配置灵活,界面美观,是个非常好的选择.我这里是在ubuntu系统下配置vscode的python3开发环境,当然也可以参照本文在其它操作系统下配置vscode的python开发环境. 1 安装插件 python 这个是vscode提供的python 官方插件,提供了python代码的调试,自动补全,代码格式化等功能 vscode-icons 这个也是vscode官方提供的插件,作用是给vscode编辑的文件增加图标.这里再推荐一个相同功能的插件**vscode-ic

  • Nginx下配置301重定向的正确方法例子

    之前给nginx做301重定向的时候经常会这样写: 复制代码 代码如下: server {     listen       80;     server_name  www.jb51.net jb51.net;     if ($http_host = www.jb51.net) {         rewrite  (.*)  http://jb51.net$1;     }     ... } 实际标准的写法应该是 复制代码 代码如下: server {     listen      

  • vscode配置setting.json文件实现eslint自动格式代码

    一.ESlint+Vetur 实现ESlint代码规范 二.重点----旧版本(旧版本配置在setting.json 会出现警告) { "eslint.autoFixOnSave": true, "eslint.validate": [ "javascript", { "language": "vue", "autoFix": true }, { "language"

  • Vue项目vscode 安装eslint插件的方法(代码自动修复)

    ESlint:是用来统一JavaScript代码风格的工具,不包含css.html等. 方法和步骤: 通常情况下vue项目都会添加eslint组件,我们可以查看webpack的配置文件package.json查看,也可以查看工程下是否有.eslintrc.js和.eslintignore查看到eslint是否开启. 当我们编写不符合eslint规范的代码时,启动项目会报错,比如 这个时候可以安装vscode eslint插件,就可以自动检测不符合规范的代码.打开vscode左侧扩展面板,搜索es

  • Vue-cli Eslint在vscode里代码自动格式化的方法

    编辑器另外一个很重要的功能就是代码格式化了,VS Code默认提供常见文件的格式化,如.js,.html等. 添加对.vue文件的格式化支持 这里我们添加对 .vue 文件的格式化支持. 1. 安装 Vetur 插件 2. 在 VS Code 的设置中添加如下规则: { "vetur.format.defaultFormatter": { "html": "prettier", "css": "prettier&qu

随机推荐