亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

vscode 中格式化代碼[vue2支持,插件ESLint、Prettier、Vetur]

標簽:
Html5

1. 安装vscode插件

  • ESLint

  • Prettier formatter for Visual Studio Code

  • Vetur

2. 配置文件

.editorconfig

root = true[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = truetrim_trailing_whitespace = truetab_width = 1

.eslintrc.js

// https://eslint.org/docs/user-guide/configuringmodule.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
  },
  extends: [    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/essential',    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    'standard'
  ],  // required to lint *.vue files
  plugins: [    'vue'
  ],  // add your custom rules here
  rules: {    // 融合了 jquery 所以暂时屏蔽
    "no-undef": 0, //不允许未声明的变量
    "no-unused-vars": [0, {"vars": "all", "args": "after-used"}], //不允许有声明后未使用的变量或者参数
    "no-tabs": 0, //不允许tabs

    "no-mixed-spaces-and-tabs": [0, "smart-tabs"], //不允许混用tab和空格
    "indent": [0, 4],//缩进风格
    "camelcase": [0, {"properties": "never"}], //强制驼峰命名规则
    "space-before-function-paren": [0, {"anonymous": "always", "named": "never"}], //函数定义时括号前的空格

    // allow paren-less arrow functions
    'arrow-parens': 0,    'no-extra-semi': 0, //不允许出现不必要的分号

    // allow async-await
    'generator-star-spacing': 'off',    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

用户设置 setting.json

{  "files.autoSave": "afterDelay",  "editor.fontSize": 14,  "editor.tabSize": 2,  "eslint.autoFixOnSave": true,  "eslint.validate": [    "javascript",    "javascriptreact",    "vue",
    {      "language": "html",      "autoFix": true
    }
  ],  "prettier.singleQuote": true,  "prettier.semi": false}

3. 使用

  • 方式一:右键格式化代码

  • 方式二:打开命令面板 (>eslint fix all auto-fixable problems)



作者:会煮咖啡的猫咪
链接:https://www.jianshu.com/p/879456a0d925
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。


點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
Web前端工程師
手記
粉絲
37
獲贊與收藏
165

關注作者,訂閱最新文章

閱讀免費教程

  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消