VScode 编辑器

网页版在线编辑

• https://insiders.vscode.dev/open in new window

快捷键

macOS

• 参考：http://t.zoukankan.com/zhou-xm-p-13441533.htmlopen in new window

• 回到上一个文件位置：control + '-'

Windows

• 回到上一个文件位置：Alt + 左箭头
• 回到下一个文件位置：Alt + 右箭头

eslint

代码质量风格检查插件

• 文档open in new window

在项目中添加.eslintrc.js文件，并配置

{
  "rules": {
    // 指定数组的元素之间要以空格隔开(,后面)， never参数：[ 之前和 ] 之后不能带空格，always参数：[ 之前和 ] 之后必须带空格
    "array-bracket-spacing": [2, "never"],
    //关闭禁止混用tab和空格
    "no-mixed-spaces-and-tabs": [0],
    //语句强制分号结尾 `[2, "always"]`
    "semi": 0,
    // 禁止使用alert confirm prompt
    "no-alert": 0,
    //不能用多余的空格
    "no-multi-spaces": 1,
    // 关闭不允许对象后面尾随逗号
    "comma-dangle": "off"
  }
}

TIP

"off" 或 0 - 关闭规则

"warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)

"error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

添加自动保存时修正规格

在 VScode - settings.json中添加配置

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

prettier

代码格式美化插件

• 文档open in new window

在指定项目中配置使用

在项目中添加.prettierrc.js文件，并配置

module.exports = {
  bracketSpacing: true, // 大括号内的首尾需要空格
  singleQuote: true, // 使用单引号
  trailingComma: 'es5', // 末尾逗号。`none`
  arrowParens: 'avoid', // sj
  semi: false, // 行尾是否需要有分号
  printWidth: 120, // 一行最大字符数
  endOfLine: 'lf', // 换行符使用 lf
  jsxSingleQuote: false, // jsx 不使用单引号，而使用双引号
  tabWidth: 2, // 一个tab长度
  // prettier对不同的文件有不同的默认规则，可用overrides字段覆盖
  overrides: [
    {
      files: ['*.md', '*.json', '*.yml'],
      options: {
        tabWidth: 2,
      },
    },
  ],
};

在编辑器中全局配置使用

1. 安装插件
2. 在 vscode 中自定义 settings.json

具体参数配置地址：https://prettier.io/docs/en/options.html

"prettier.semi": false,
"prettier.singleQuote": true,

eslint 和 prettier 同时开启保存可能冲突

如果两个插件同时开启了保存检查配置，可能会引起冲突，因为两个插件都有各自的检查规则，需要注意。

常用的 settings.json

{
  "git.ignoreMissingGitWarning": false,
  "beautify.tabSize": 2,
  "workbench.tree.indent": 4,
  "editor.fontSize": 16,
  "gitlens.views.repositories.branches.layout": "list",
  "typescript.format.enable": false,
  "tslint.enable": false,
  "tslint.ignoreDefinitionFiles": false,
  "tslint.autoFixOnSave": false,
  "tslint.exclude": "",
  "javascript.implicitProjectConfig.checkJs": true,
  "typescript.reportStyleChecksAsWarnings": false,
  "typescript.suggestionActions.enabled": false,
  "typescript.tsc.autoDetect": "off",
  "debug.console.fontSize": 14,
  "javascript.implicitProjectConfig.experimentalDecorators": true,
  "gitlens.views.repositories.files.layout": "list",
  "javascript.format.insertSpaceAfterConstructor": true,
  "diffEditor.ignoreTrimWhitespace": false,
  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorTheme": "Atom One Dark",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "prettier.semi": false,
  "prettier.singleQuote": true,
  // "editor.codeActionsOnSave": {
  //     "source.fixAll.eslint": true
  // },
  "javascript.updateImportsOnFileMove.enabled": "never",
  "[json]": {
    "editor.quickSuggestions": {
      "strings": true
    },
    "editor.suggest.insertMode": "replace",
    "gitlens.codeLens.scopes": ["document"],
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "git.enableSmartCommit": true,
  "editor.tabSize": 2,
  "guides.enabled": false,
  "bracketPairColorizer.depreciation-notice": false,
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "prettier.useEditorConfig": false,
  "files.eol": "\n",
  "explorer.confirmDelete": false,
  "security.workspace.trust.untrustedFiles": "open",
  "search.followSymlinks": false,
  "git.autorefresh": false,
  "git.autofetch": true,
  "git.path": "",
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "python.venvPath": "/Users/cass/.local/share/virtualenvs/fisher-LIQww19M",
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[python]": {
    "editor.defaultFormatter": "ms-python.python"
  },
  "php.validate.executablePath": "",
  "beautify.config": "",
  "prettier.bracketSameLine": true,
  "auto-close-tag.activationOnLanguage": [
    "xml",
    "php",
    "blade",
    "ejs",
    "jinja",
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "plaintext",
    "markdown",
    "vue",
    "liquid",
    "erb",
    "lang-cfml",
    "cfml",
    "HTML (EEx)",
    "HTML (Eex)",
    "plist"
  ],
  "auto-close-tag.excludedTags": [
    "area",
    "base",
    "br",
    "col",
    "command",
    "embed",
    "hr",
    "img",
    "input",
    "keygen",
    "link",
    "meta",
    "param",
    "source",
    "track",
    "wbr"
  ]
}