[分享] VSCode配置与团队ESLint和TSLint配置

简介: [分享] VSCode配置与团队ESLint和TSLint配置

2019/12/25 更新


VSCode 官网


setting.json

{
  /**  vscode 系统配置项 */
  "window.zoomLevel": 0,
  "files.autoSave": "afterDelay",
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  "vsicons.dontShowNewVersionMessage": true,
  "editor.foldingStrategy": "indentation",
  "git.autofetch": true,
  "git.enableSmartCommit": true,
  "editor.tabCompletion": "on",
  "editor.codeActionsOnSave": {
    "source.fixAll.tslint": true,
    "source.fixAll.eslint": true
  },
  "editor.accessibilitySupport": "off",
  "terminal.integrated.rendererType": "dom",

  /**  代码格式化配置 */
  "editor.tabSize": 2,
  // 打开对vue的lint,并自动fix
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  // 尽可能控制尾随逗号的打印
  "prettier.trailingComma": "all",
  // 在保存时格式化文件
  "editor.formatOnSave": true,
  // 保存时自动fix
  "eslint.autoFixOnSave": true,
  // 格式化插件的配置
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {}
  },
   // 对于.vue文件,交给prettier,stylus因为prettier不支持改用vertur选项
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.ts": "prettier",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  /**  第三方插件库配置 */
  "px2rem-plus.base": 100,
  "workbench.iconTheme": "vscode-icons",
  "workbench.startupEditor": "newUntitledFile",
  "liveServer.settings.donotShowInfoMsg": true,
  // 自动导入
  "typescript.updateImportsOnFileMove.enabled": "prompt",
  "javascript.updateImportsOnFileMove.enabled": "prompt",
  "javascript.suggest.autoImports": true,
  // 文件修改自动载入作者与时间
  "fileheader.configObj": {
    "createFileTime": true,
    "language": {
      "languagetest": {
        "head": "/$$",
        "middle": " $ @",
        "end": " $/"
      }
    },
    "autoAdd": false,
    "autoAlready": true,
    "annotationStr": {
      "head": "/*",
      "middle": " * @",
      "end": " */",
      "use": false
    },
    "headInsertLine": {
      "php": 2
    },
    "beforeAnnotation": {},
    "afterAnnotation": {},
    "specialOptions": {},
    "switch": {
      "newlineAddAnnotation": true
    },
    "config": {
      "dateFormat": "YYYY-MM-DD HH:mm:ss",
      "prohibitAutoAdd": ["json"],
      "moveCursor": true
    }
  },
  "fileheader.cursorMode": {},
  "fileheader.customMade": {
    "Author": "ZStop",
    "Date": "Do not edit", // 文件创建时间(不变)
    "LastEditors": "ZStop", // 文件最后编辑者
    "LastEditTime": "Do not edit" // 文件最后编辑时间
  },
  "diffEditor.ignoreTrimWhitespace": false,
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
}

tslint.json

{
  "defaultSeverity": "warning",
  "extends": ["tslint:recommended"],
  "linterOptions": {
    "exclude": ["node_modules/**"]
  },
  "rules": {
    "indent": [true, "spaces", 2],
    "interface-name": false,
    "ordered-imports": false,
    "object-literal-sort-keys": false,
    "max-line-length": false,
    "no-consecutive-blank-lines": false,
    "trailing-comma": false,
    "eofline": false,
    "quotemark": false,
    "typedef-whitespace": false,
    "no-console": false,
    "no-var-requires": false,
    "prefer-for-of": false,
    "forin": false,
    "variable-name": false,
    "no-empty": false,
    "noImplicitThis": false,
    "arrow-parens": false,
    "no-shadow": false,
    "no-shadowed-variable": false,
    "only-arrow-functions": false
  }
}
目录
相关文章
|
24天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。
【10月更文挑战第7天】随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这两个工具,可以确保代码风格一致,提升团队协作效率和代码质量。
183 2
|
6天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
71 4
|
4天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具,可以确保代码风格一致,提高代码质量和可读性。
14 1
|
22天前
|
JavaScript 前端开发 开发者
如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。
【10月更文挑战第9天】随着前端开发技术的发展,代码规范和格式化工具变得至关重要。本文介绍如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。通过安装插件、配置 ESLint 和 Prettier,以及设置 VSCode,实现代码实时检查和格式化,确保代码风格一致。
18 2
|
23天前
|
Ubuntu Linux 编译器
Linux/Ubuntu下使用VS Code配置C/C++项目环境调用OpenCV
通过以上步骤,您已经成功在Ubuntu系统下的VS Code中配置了C/C++项目环境,并能够调用OpenCV库进行开发。请确保每一步都按照您的系统实际情况进行适当调整。
198 3
|
23天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。
【10月更文挑战第8天】本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。通过安装 VSCode 插件、配置 ESLint 和 Prettier,实现代码规范检查和自动格式化,确保代码风格一致,提高可读性和维护性。
31 2
|
3月前
|
JavaScript 前端开发 编译器
TypeScript教程(一)在vscode中的配置TypeScript环境
本文是一篇TypeScript入门教程,介绍了在VS Code中配置TypeScript环境的步骤,包括安装Node.js、使用npm安装TypeScript、配置npm镜像源、安装VS Code的TypeScript扩展,以及创建和运行一个简单的TypeScript "Hello World"程序。
TypeScript教程(一)在vscode中的配置TypeScript环境
|
2月前
|
JSON 数据格式
vscode配置latex
本文档介绍如何在VSCode中配置LaTeX环境。首先需安装texlive和VSCode,并提前安装SumatraPDF以查看PDF文件。配置包括设置自动编译、PDF预览程序及正反向搜索等。提供了详细的`settings.json`配置示例,涵盖不同操作系统下的编译选项与方案。此外,还介绍了如何配置SumatraPDF实现与VSCode的跳转功能,以及相关快捷键的使用方法。
|
3月前
|
NoSQL 编译器 C语言
VSCode配置配置C++环境
VSCode配置配置C++环境
87 1
|
3月前
|
Dart
Flutter笔记:手动配置VSCode中Dart代码自动格式化
Flutter笔记:手动配置VSCode中Dart代码自动格式化
407 5