vs code保存自动格式化代码及eslint/tslint修复-太爽(丝滑般的感觉)

vs code保存自动格式化代码及eslint/tslint修复-太爽(丝滑般的感觉)

1469发表于2020-06-04

现在没有前后端分离的开发模式都不好意思跟同行交流。前后端分离的好处这里就不再赘述了。

本司开发的系统是基于Angular(ng zorro),TypeScript,后台采用Spring Boot。写前端本人独爱vs code,配合vs code的一些插件,写代码简直那个爽(丝滑般的感觉)。

vs code保存自动格式化代码及eslint/tslint修复,是不是能找到宇宙最强大,最好用的IDE Visual Studio的感觉?

下面我分享一下我的vs code配置。

from clipboard

一、vs code版本Version: 1.45.0 (user setup)

from clipboard

二、安装插件

需要安装一下插件:

ESLint
TSLint
Prettier - Code formatter
Manta's Stylus Supremacy
language-stylus
Vetur

from clipboard

三、配置prettier

Prettier是一个能够完全统一你和同事代码风格的利器,并且统一的代码风格能保证代码的可读性。

在项目根目录增加文件.prettierrc


{
  "printWidth"120,
  "semi"false,
  "singleQuote"true
}


四、配置tsconfig

tsconfig.json:


{
  "compileOnSave"false,
  "compilerOptions": {
    // "baseUrl": "./",
    // 添加路径相关
    "baseUrl""src",
    "paths": {
      "@app/*": ["app/*"]
    },
    "outDir""./dist/out-tsc",
    "sourceMap"true,
    "declaration"false,
    "downlevelIteration"true,
    "experimentalDecorators"true,
    "module""esnext",
    "moduleResolution""node",
    "importHelpers"true,
    "target""es2015",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck"true,
    "strictInjectionParameters"true
  }
}


五、配置tslint

因为使用是typescript,所以我当然要用tslint。

添加文件tslint.json:


{
  "extends""tslint:recommended",
  "rules": {
    "array-type"false,
    "arrow-parens"false,
    "deprecation": {
      "severity""warning"
    },
    "component-class-suffix"true,
    "contextual-lifecycle"true,
    "directive-class-suffix"true,
    "directive-selector": [
      true,
      "attribute",
      "app",
      "camelCase"
    ],
    "component-selector": [
      true,
      "element",
      "app",
      "kebab-case"
    ],
    "import-blacklist": [
      true,
      "rxjs/Rx"
    ],
    "interface-name"false,
    "max-classes-per-file"false,
    "max-line-length": [
      true,
      140
    ],
    "member-access"false,
    "member-ordering": [
      true,
      {
        "order": [
          "static-field",
          "instance-field",
          "static-method",
          "instance-method"
        ]
      }
    ],
    "no-consecutive-blank-lines"false,
    "no-console": [
      true,
      "debug",
      "info",
      "time",
      "timeEnd",
      "trace"
    ],
    "no-empty"false,
    "no-inferrable-types": [
      true,
      "ignore-params"
    ],
    "no-non-null-assertion"false,
    "no-redundant-jsdoc"true,
    "no-switch-case-fall-through"true,
    "no-use-before-declare"true,
    "no-var-requires"false,
    "object-literal-key-quotes": [
      true,
      "as-needed"
    ],
    "object-literal-sort-keys"false,
    "ordered-imports"false,
    "quotemark": [
      true,
      "single"
    ],
    "trailing-comma"false,
    "no-conflicting-lifecycle"true,
    "no-host-metadata-property"true,
    "no-input-rename"true,
    "no-inputs-metadata-property"true,
    "no-output-native"true,
    "no-output-on-prefix"true,
    "no-output-rename"true,
    "no-outputs-metadata-property"true,
    "template-banana-in-box"true,
    "template-no-negated-async"true,
    "use-lifecycle-interface"true,
    "use-pipe-transform-interface"true
  },
  "rulesDirectory": [
    "codelyzer"
  ]
}


vs全局设置

快捷键:ctrl+,

然后点右上角进入settings.json文本编辑模式

from clipboard

settings.json

{
  "editor.wordWrap""on",
  "update.enableWindowsBackgroundUpdates"false,
  "update.mode""none",
  "update.showReleaseNotes"false,
  "window.zoomLevel"0,

  "typescript.updateImportsOnFileMove.enabled""always",
  "explorer.confirmDelete"false,
  // #值设置为true时,每次保存的时候自动格式化;值设置为false时,代码格式化请按shift+alt+F
  "editor.formatOnSave"true,
  //设置tab的缩进为2
  "editor.tabSize"2,
  // #每次保存的时候将代码按eslint和tslint格式进行修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint"true,
    "eslint.autoFixOnSave"false,
    "source.fixAll.tslint"true
  },
  "eslint.run""onSave",
  //  #让prettier使用eslint的代码格式进行校验
  // vscode 更新后已经统一使用editor.codeActionsOnsave
  //  #代码结尾加分号为好
  "prettier.semi"true,
  //  #使用带引号替代双引号
  "prettier.singleQuote"true,
  "prettier.tabWidth"4,
  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis"true,
  // #这个按用户自身习惯选择
  "vetur.format.defaultFormatter.html""js-beautify-html",
  // #让vue中的js按"prettier"格式进行格式化
  "vetur.format.defaultFormatter.js""prettier",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      // #vue组件中html代码格式化样式
      "wrap_attributes""force-aligned"//也可以设置为“auto”,效果会不一样
      "wrap_line_length"200,
      "end_with_newline"false,
      "semi"false,
      "singleQuote"true
    },
    "prettier": {
      "semi"false,
      "singleQuote"true
    }
  },
  "[jsonc]": {
    "editor.defaultFormatter""esbenp.prettier-vscode"
  },
  // 格式化stylus, 需安装Manta's Stylus Supremacy插件
  "stylusSupremacy.insertColons"false// 是否插入冒号
  "stylusSupremacy.insertSemicolons"false// 是否插入分号
  "stylusSupremacy.insertBraces"false// 是否插入大括号
  "stylusSupremacy.insertNewLineAroundImports"false// import之后是否换行
  "stylusSupremacy.insertNewLineAroundBlocks"false,
  "prettier.useTabs"true,
  "files.autoSave""off",
  "[javascript]": {
    "editor.defaultFormatter""esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter""esbenp.prettier-vscode"
  },
  "diffEditor.ignoreTrimWhitespace"false,
  "[html]": {
    "editor.defaultFormatter""esbenp.prettier-vscode"
  }, // 两个选择器中是否换行
  //在vue文件里设置html关联
  "emmet.syntaxProfiles": {
    "vue-html""html",
    "vue""html"
  },
  "explorer.confirmDragAndDrop"false,
  "terminal.integrated.rendererType""dom",
  "files.associations": {
    "*.ejs""html",
    "*.vue""html"
  },
  "emmet.triggerExpansionOnTab"true,
  "emmet.includeLanguages": {
    "vue-html""html",
    "vue""html"
  },
  "editor.accessibilitySupport""on",
  "[typescript]": {
    "editor.defaultFormatter""esbenp.prettier-vscode"
  }
}

六、最后效果

保存代码自动修复并格式代码,也不用每次想格式化代码要手动按

shift+alt+f


小编蓝狐