正文

请到「今天看啥」查看全文

配置eslint

1. 插件扩展商店搜索 eslint ，点击安装，并重新加载；
   
2. 配置 eslint ，打开 文件 ==> 首选项 ==> 设置 ；
   

3. 在用户设置中插入配置代码(支持vue):

       "eslint.options": {
           "plugins": [
               "html"
           ]
       },
       "eslint.validate": [
           "javascript",
           "javascriptreact",
           "html",
           "vue",
           {
               "language": "html",
               "autoFix": true
           },
           {
               "language": "vue",
               "autoFix": true
           }
       ],
       "eslint.autoFixOnSave": true,
        "editor.tabSize": 2,

   此时，eslint就可以在项目中检测代码了

eslint检测比较严格，若希望vue按照eslint格式化代码，进行以下操作：

1. 安装插件 Vetur ，这是vscode上一个vue.js代码提示，语法高亮等功能的流行插件；
2. 安装后在默认配置可以看到， vetur 默认采用 prettier 格式化；
   

3. 安装插件 prettier ,但他的格式化并不和eslint一样，所以在用户配置中添加以下配置；

   //分号
   "prettier.semi": false,
   //单引号包裹字符串
   "prettier.singleQuote": true,
   //html格式化依赖  默认为none
   "vetur.format.defaultFormatter.html": "js-beautify-html",
   //函数前加空格
   "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
   //没有下边这个 上边不生效
   "vetur.format.defaultFormatter.js": "vscode-typescript",

vue扩展推荐

• Vue VSCode Snippets

• Vue 2 Snippets

  上面是两个很好用的vue代码片段

• Better Comments 高亮你注释的扩展 比如：
  
• css peek css转到定义
• file peek file到定义

请到「今天看啥」查看全文