7

ESlint + VSCode自动格式化代码

 3 years ago
source link: https://www.fdevops.com/2020/09/07/vscode-4887
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

ESlint + VSCode自动格式化代码

兰玉磊 • 2020年9月7日 15:15 • Web • 阅读 2869

本文用 Vue 项目做示范。

利用 Vue CLI 创建项目时要将 ESlint 选上，下载完依赖后，用 VSCode 打开项目。

安装插件 ESLint，然后 File -> Preference -> Settings（如果装了中文插件包应该是 文件 -> 选项 -> 设置）。

Mac是 Code -> Preference -> Settings （Code -> 首选项 -> 设置）。

搜索 eslint，点击 Edit in setting.json。

ESlint + VSCode自动格式化代码

以下是我（兰玉磊）的格式化配置信息，将以下选项添加到配置文件

  "editor.fontSize": 13,
  "eslint.enable": true, //是否开启vscode的eslint
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }, // #每次保存的时候自动格式化
  "eslint.options": { //指定vscode的eslint所处理的文件的后缀
    "extensions": [
      ".js",
      ".vue",
      ".ts",
      ".tsx"
  //确定校验准则
  "eslint.validate": [
    "javascript",
    "vue",
    "html"
  "files.autoSave": "onFocusChange",
  "files.associations": {
    "*.wpy": "vue",
    "*.wxml": "wxml",
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript",
    "*.html": "html"
  "emmet.includeLanguages": {
    "wxml": "html"
  "minapp-vscode.disableAutoConfig": true,
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  //  #让prettier使用eslint的代码格式进行校验
  "prettier.eslintIntegration": true,
  //  #去掉代码结尾的分号
  "prettier.semi": false,
  //  #使用单引号替代双引号
  "prettier.singleQuote": true,
  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // #让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "git.enableSmartCommit": true,
  "editor.quickSuggestions": {
    "strings": true
  //一定要在vutur.defaultFormatterOptions参数中设置，单独修改prettier扩展的设置是无法解决这个问题的，因为perttier默认忽略了vue文件（事实上从忽略列表移除vue也不能解决这个问题）
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      // force-aligned | force-expand-multiline
      "wrap_attributes": "force-aligned"
    "prettyhtml": {
      "printWidth": 100,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": true
    "prettier": {
      //  #去掉代码结尾的分号
      "semi": false,
      //  #使用单引号替代双引号
      "singleQuote": true
  // 插件KoroFileHeader
  // 文件头部注释-快捷键crtl+alt+i（window）,ctrl+cmd+t (mac)
  "fileheader.customMade": {
    "Descripttion": "",
    //"version": "",
    "Author": "voanit",
    "Date": "Do not edit",
    "LastEditors": "voanit",
    "LastEditTime": "Do not Edit"
  //函数注释-快捷键ctrl+alt+t (window), ctrl+alt+t(mac)
  "fileheader.cursorMode": {
    "name": "",
    // "test": "test font",
    // "msg": "",
    "param": "",
    "return": ""
  //安装live Server插件
  "liveServer.settings.donotVerifyTags": true,
  "liveServer.settings.donotShowInfoMsg": true,
  "liveServer.settings.NoBrowser": true,
  "liveServer.settings.CustomBrowser": "chrome", //设置默认打开的浏览器
  "liveServer.settings.host": "127.0.0.1",
  "liveServer.settings.port": 5000, //设置本地服务的端口号
  "liveServer.settings.root": "/dist",
  "workbench.colorTheme": "Brackets Light Pro",
  "workbench.iconTheme": "material-icon-theme",
  "go.useLanguageServer": true,
  "tabnine.experimentalAutoImports": true,
  "explorer.confirmDelete": false,
  "kite.showWelcomeNotificationOnStartup": false,
  "vs-kubernetes": {
    "vs-kubernetes.helm-path.mac": "/Users/lanyulei/.vs-kubernetes/tools/helm/darwin-amd64/helm"
  "vsicons.dontShowNewVersionMessage": true,
  "terminal.integrated.shell.osx": "/bin/bash",
  "workbench.startupEditor": "newUntitledFile",
  "eslint.codeAction.showDocumentation": {
    "enable": true

配置完之后，VSCode 会根据你当前 Vue 项目下的 .eslintrc.js 文件的规则来验证和格式化代码。

PS：自动格式化代码在保存时自动触发，目前试了 JS 以及 vue 文件中的 JS 代码都没问题，html 和 vue 中的 html 和 css 无效。

本文为原创文章，未经授权禁止转载本站文章。
原文出处：兰玉磊的个人博客
原文链接：https://www.fdevops.com/2020/09/07/vscode-4887
版权：本文采用「署名-非商业性使用-相同方式共享 4.0 国际」知识共享许可协议进行许可。


report

Recommend

  • 189
    • 掘金 juejin.im 7 years ago
    • Cache

    让你的代码自动格式化

    前言 每个团队都应该有统一的代码风格和规范，这带来的好处我相信不言而喻，具体我就不多说了，大家都懂的?。如何更有效率的去做这件事呢，我这次就来说说如何更好的自动格式化你的代码。 现状 大多数 iOS 开发者应该都知道 Xcode 的插件 Clang Form

  • 52
    • www.haorooms.com 6 years ago
    • Cache

    vscode保存代码，自动按照eslint规范格式化代码设置

    前言 编辑器代码风格一致，是前端代码规范的一部分。同一个项目，或者同一个小组，保持代码风格一致很必要。就拿vue项目来说，之前做的几个项目，很多小伙伴代码格式化用的是vue-beautify ,这个格式化工具有个明显的缺点，就是...

  • 29
    • www.cnblogs.com 4 years ago
    • Cache

    vscode+eslint自动格式化vue代码的方法

    前言 使用vscode开发vue项目的时候，为了编码格式的统一化，使用eslint规范进行格式化。此时通过eslint插件可以实现对vue代码的自动格式化。 使用方式 在vscode的插件模块处，搜索eslint。找到下...

  • 13
    • daveceddia.com 4 years ago
    • Cache

    ESLint + VSCode: How to Format Your Code Using .eslintrc

    ESLint + VSCode: How to Format Your Code Using .eslintrc April 07, 2021I’ve gotten very used to having VSCode autoformat my file when I save. Usually, I use Prettier. But I joined a project that uses ESLint to manage...

  • 6
    • yihui.org 3 years ago
    • Cache

    是莽撞人就来单挑：关于自动格式化 R 代码的求助

    是莽撞人就来单挑：关于自动格式化 R 代码的求助 谢益辉 / 2017-02-26 2021-03-22 更新：下面的第一个愿望已经在 formatR 1.9 中实现。

  • 21
    • www.zhihu.com 3 years ago
    • Cache

    什么编辑器适合写vue，需要代码自动格式化？

    什么编辑器适合写vue，需要代码自动格式化？做一个企业官网项目，在看vue-cil，新建了一个2.0的项目，写第一个helloworld页面，报了好多错误。大都是，缺少一个空格；需要两个空格但是…

  • 16
    • www.fdevops.com 3 years ago
    • Cache

    Pycharm使用black实现保存即自动格式化代码

    Pycharm使用black实现保存即自动格式化代码 兰玉磊 • 2020年4月5日 15:46 • Python • 阅读 3930在平时工作开发中，...

  • 7
    • lindexi.gitee.io 3 years ago
    • Cache

    dotnet 将自动代码格式化机器人带入团队 GitLab 平台

    dotnet 将自动代码格式化机器人带入团队 GitLab 平台 给团队带入一个 代码格式化机器人 能提升团队的幸福度，让团队的成员安心写代码，不用关注代码格式化问题。也可以减少在代码审查里撕格式化问题 本文来告诉大家如何给团队的 GitLab 平台带入一...

  • 4
    • www.jdon.com 3 years ago
    • Cache

    使用Vscode插件SQLTools自动格式化SQL语句

    使用Vscode插件SQLTools自动格式化SQL语句 使用 SQL Tools 自动格式化 SQL，SQLTools 提供的一些功能： 美化器/格式化器 查询运行器、历史记录和书签 连接浏览器 查询生成器（仅限 INSERT）

  • 4
    • lrita.github.io 2 years ago
    • Cache

    使用clang-format在CI中自动格式化C++代码

    使用clang-format在CI中自动格式化C++代码 2022/07/30

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK