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

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

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

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

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

 

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

二、安装插件

需要安装一下插件：

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

 

三、配置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文本编辑模式

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

 

转载：https://www.lanhusoft.com/Article/762.html