文章目录

  • 前言
  • 一、开发工具
  • 二、配置步骤
  • 1.安装相关插件
  • 2. 插件介绍
  • 3. setting.json
  • 总结


前言

不论是多人协作亦或个人项目，代码标准是很关键的。这样做，不只可以很大水平地防止根本语法错误，也确保了代码的可读性。这所谓工欲善其事，必先利其器，个人引荐VS Code + ESLint ，绝对让你码力倍增

一、开发工具

vscode 如何配置ts与eslint生效_vscode

二、配置步骤

1.安装相关插件

vscode 如何配置ts与eslint生效_编辑器_02

2. 插件介绍

(1)  Vetur： 语法高亮，标签补全，Lint检查，格式化
 (2)  Eslint： 代码规范，错误检查，及时帮助我们发现错误的代码及不规范的代码
 (3) Prettier：主要用于代码格式化，它的功能与ESlint 有一定的重叠，但是它们的专注点不一样，
 ESlint主要专注代码的校验；
 而Prettier 主要专注于代码的格式美化，两者在一起使用时，防止一些格式的冲突

现结合三者各自特点，以此来提高我们在项目开发过程的效率和体验

3. setting.json

快捷键 ctrl+,，打开VS Code 设置界面，在原有的 setting.json 新增以下信息（若有冲突，采用以下配置），配置完成后， 关闭 VS Code 重新启动

// 界面配置路径 Text Editor
  "editor.wordWrap": "bounded", // 设置 超过word Wrap Column设置的字符数、达到视口最小宽度，时自动换行
  "editor.wordWrapColumn": 120, // editor.wordWrap 配置为wordWrapColumn或者bounded时起作用
  "editor.insertSpaces": true, // 设置输入tab键时是否自动转为插入空格（默认ture，即自动转空格）,当editor.detectIndentation配置为 true 时，该配置项将被自动覆盖
  "editor.detectIndentation": false, // 设置是否自动检测对齐，控制打开文件时是否基于文件内容，自动检测editor.tabSize 和editor.insertSpaces
  // 界面配置路径 Text Editor -> Font
  "editor.fontSize": 14, //设置延迟一定的时间后自动保存文件
  "files.autoSaveDelay": 1000, // 设置自动保存文件前需要延迟的时间，单位毫秒 默认1000
  "files.enableTrash": true, // 设置删除文件、目录时是否允许删除到操作系统回收站，默认为true，即允许
  "files.encoding": "utf8", // 设置读写文件时所用编码 默认UTF-8，可针对每种语言进行设置
  "files.autoGuessEncoding": false, // 设置打开文件时，是否自动猜测字符编码，默认false，即不自动猜测，可针对每种语言进行设置
  // 界面配置路径 Text Editor -> Formatting
  "editor.formatOnPaste": true, // 设置黏贴内容时是否自动格式化，true表示自动格式化，需要配置格式化器(formatter)才可使用
  "editor.formatOnSave": true, // 设置保存文件时是否自动格式化，true表示自动格式化,需要配置格式化器(formatter)才可使用
  "editor.formatOnSaveMode": "file", // 设置保存文件时格式化整个文件还是仅被修改处。该配置项仅在 "editor.formatOnPaste" 为 true时生效
  "editor.formatOnType": true, // 设置输入完成后是否自动格式化当前行
  // 界面配置路径 Text Editor -> Minimap
  "editor.minimap.maxColumn": 120, // 设置minimap的宽度以设置可渲染的最大列数，默认120
  // 界面配置路径 Text Editor -> Suggestions
  "editor.quickSuggestions": {
    "strings": true
  }, // 默认选项为on 设置回车时是否接受默认建议选项
  // Eslint插件配置
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true // 设置保存时是否自动修复代码
  },
  // 界面配置路径 Extensiosn -> ESlint
  "eslint.alwaysShowStatus": true, // 设置状态栏是否一直显示ESlint图标项，true表示一直显示
  "eslint.format.enable": true, // 设置是否把ESlint作为一个格式化器，true表示启用
  // Prettier插件配置
  "prettier.enable": true, // 设置是否开启prettier插件，默认为true，即开启
  "prettier.semi": false, // 设置是否在每行末尾添加分号，默认为 true
  "prettier.singleQuote": true, // 设置格式化时，保持单引号，如果设置为true，则单引号会自动变成双引号
  "prettier.tabWidth": 2, // 设置每个tab占用多少个空格
  "prettier.printWidth": 120, // 设置每行可容纳字符数
  "prettier.useTabs": false, // 设置是否使用tab键缩进行，默认为false，即不使用
  "prettier.bracketSpacing": true, // 在对象，括号与文字之间加空格 true - Example: { foo: bar }   false - Example: {foo: bar}， 默认为true
  "prettier.jsxBracketSameLine": true, // 设置在jsx中，是否把'>' 单独放一行，默认为false，即单独放一行
  // 设置各种代码的默认格式化器//以下为默认配置
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // Vetur插件配置
  "vetur.format.enable": true, // 设置是否禁用插件格式化功能 // 默认为true，即开启
  "vetur.format.defaultFormatter.css": "prettier", // 设置css代码(<style>包含的代码块）默认格式化器
  "vetur.format.defaultFormatter.sass": "sass-formatter",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  "vetur.format.defaultFormatter.html": "prettier", // 设置html代码(<template>包含的代码块)默认格式化器
  "vetur.format.defaultFormatter.js": "prettier-eslint", // 设置js代码<script>包含的代码块）默认格式化器
  "vetur.format.defaultFormatter.ts": "prettier", // 设置vetur默认使用 prettier格式化代码
  "vetur.format.options.tabSize": 2, // 设置tab键占用的空格数，该配置将被所有格式化器继承
  "vetur.format.options.useTabs": false, // 设置是否使用tab键缩进 默认false，即不使用，该配置将被所有格式化器继承
  //"vetur.ignoreProjectWarning": true // 控制是否忽略关于vscode项目配置错误的告警，默认为false，即不忽略
  "files.eol": "\n",

总结

每个人和团队都有自己的代码规范，请根据自己书写规范合理配置