vscode使用小記

vscode

本文的後續將更新放在 github 中。

• 官網

配置

推薦在項目中使用 .vscode/setting.json 文件保存配置。推薦配置以下：

{
    "javascript.validate.enable": false,
    "editor.wrappingColumn": 100,
    "files.eol": "\n",
    "beautify.onSave": ["js", "css", "html"],
    "beautify.language": {
        "css": [
            "less"
        ],
        "html": [
            "vue"
        ]
    },
    "beautify.onSaveIgnore": [
        "**/node_modules/**",
        "**/*+(.|_|-)min.*"
    ]
}

插件

• beautify

  它是一款javascript, JSON, CSS, 和HTML代碼格式美化工具，在 [js-beautify][3] 的基礎上實現的。
  
  推薦在項目中使用 `.jsbeautifyrc` 文件保存配置。推薦配置以下：

  {
      "eol": "\n",
      "e4x": true,
      "js": {
          "end_with_newline": true
      },
      "html": {
          "extra_liners": []
      }
  }

• ESLint

  由微軟官方維護的一款整合進 VSCode 的 [ESlint][5] 插件。
  
  推薦在項目中使用 `.eslintrc` 文件保存配置。推薦配置以下：

  {
      "env": {
          "browser": true,
          "es6": true,
          "node": true
      },
      "parser": "babel-eslint",
      "extends": "airbnb-base",
      "plugins": [
          "html"
      ],
      "parserOptions": {
          "ecmaVersion": 6,
          "ecmaFeatures": {
              "experimentalObjectRestSpread": true,
              "jsx": true
          },
          "sourceType": "module"
      },
      "rules": {
          "comma-dangle": [2, "never"],
          "no-console": 0,
          "no-alert": 0,
          "indent": [2, 4, {
              "SwitchCase": 1
          }]
      }
  }

> 特別注意，VSCode 當前版本（1.6.1）不支持對 `<script>` 標籤內的 `JS` 代碼進行驗證，[issue][6]。

• stylelint

  > A mighty, modern CSS linter that helps you enforce consistent conventions and avoid errors in your stylesheets.
  
  推薦在項目中使用 `.stylelintrc` 文件保存配置。推薦配置還在整理中：

參考

• script 標籤裏的 js 代碼沒提示

• vscode 的界面是用的什麼技術？