使用vscode做前端开发

既然要使用vscode作为主要的IDE，那么每种用到的开发语言都要去配置一次。

语法校验

vscode支持ESLint、JSLint、StandardJS进行语法校验。我使用的是StandardJS。

1）安装插件StandardJS

ext install chenxsan.vscode-standardjs

2）安装standard与eslint-plugin-html

#可全局安装，也可以安装到当前项目下
$ sudo npm install -g standard
$ sudo npm install -g eslint babel-eslint eslint-plugin-html@3.2.2 eslint-plugin-vue

3）禁用vscode内置的校验器

"javascript.validate.enable": false

4）配置

配置vscode的settings.json（由于会使用到vuejs，所以这里包含了vue相关的配置）：

{
  "files.associations": {
    "*.vue": "html",
  },
  "standard.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    }
    "html",
  ],
  "standard.autoFixOnSave": true,
  "standard.options": {
    "ignore": [
      "node_modules/**"
    ],
    "parser": "babel-eslint",
    "plugins": ["html", "vue"],
  }
}

类型检查

在jsconfig.json 配置 checkJs。

{
    "compilerOptions": {
        "target": "ES6",
        "checkJs": true
    },
    "exclude": [
        "node_modules",
        "**/node_modules/*"
    ]
}

支持vuejs

安装插件 vetur，参考： https://vuejs.github.io/vetur 。

可修改vscode配置 settings.json 做相关的配置：

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ],
  "emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html",
  }
}

修改 jsconfig.json：

{
  "include": [
    "./src/**/*"
  ]
}