vs Code配置自动格式化

577 阅读1分钟
1、javascript细节调整
     结尾无分号
     超过140个字符换行
     使用单引号
     无尾随逗号
     箭头函数单个参数不加分号
     函数声明时禁止圆括号前有空格
2、准备插件
   Vuter 提供`vue`代码片段、语法支持、代码高亮等
   ESlint检查`javascript`语法检查和代码规范
   Prettier - Code formatter 各种代码格式化
   minapp微信小程序标签、属性的智能补全
3、开发方式
    打开`VS Code`配置文件`setting.json`
    快捷键`ctrl + shirt + p`,搜索`Settings(JSON)`
4、个性化配置
{
    // 使用vscode-icons主题 
    "workbench.iconTheme": "vscode-icons", 
    // 每次保存的时候将代码按格式进行修复 
    "editor.formatOnSave": true, 
    "editor.codeActionsOnSave": { "source.fixAll": true }, 
    "eslint.validate": ["javascript", 
    "javascriptreact", "vue"], 
    "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
    "[vue]": { "editor.defaultFormatter": "octref.vetur" }, 
    "[jsonc]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, 
    "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, 
    "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, 
    // 默认使用prettier格式化支持的文件 
    "vetur.format.defaultFormatter.js": "prettier", 
    "vetur.format.defaultFormatter.html": "prettyhtml", 
    "vetur.format.defaultFormatterOptions": { "prettier": { 
        // 结尾无分号 
        "semi": false, 
        // 超过140个字符换行 
        "printWidth": 140, 
        // 使用单引号 
        "singleQuote": true, 
        // 无尾随逗号 
        "trailingComma": "none",
        // 箭头函数单个参数不加分号 
        "arrowParens": "avoid" }, 
        "prettyhtml": { "printWidth": 140 } 
     }, 
    // 同上prettier格式化代码 
    "prettier.semi": false, 
    "prettier.printWidth": 140, 
    "prettier.trailingComma": "none",
    "prettier.singleQuote": true,
    "prettier.arrowParens": "avoid", 
    "files.associations": { 
        "*.cjson": "jsonc", 
        "*.wxss": "css", 
        "*.wxs": "javascript" 
    }, 
    // 指定wxml的格式化 
    "minapp-vscode.wxmlFormatter": "prettyHtml", 
    "minapp-vscode.disableAutoConfig": true 
}