vscode代码相关自动格式化配置

女爷i 2022-10-19 05:31 295阅读 0赞

**vscode：setting.json**

{ 
      "editor.renderIndentGuides": false,
      "editor.codeActionsOnSave": { 
        "source.fixAll": true
      },
      "git.confirmSync": false,
      "launch": { 
        "configurations": [],
        "compounds": [],
        "search.exclude": { 
          "system/": true,
          "!/system/**/*.ps*": true
        }
      },
      "[html]": { 
        "editor.defaultFormatter": "vscode.html-language-features"
      },
      "[json]": { 
        "editor.defaultFormatter": "vscode.json-language-features"
      },
      "terminal.integrated.automationShell.osx": "",
      "security.workspace.trust.untrustedFiles": "open",
      "sonarlint.ls.javaHome": "c:\\Users\\满船1167\\.vscode\\extensions\\sonarsource.sonarlint_managed-jre\\jre\\jdk-11.0.11+9-jre",
      "tabnine.experimentalAutoImports": true,
      "sonarlint.rules": { 
        "javascript:S4326": { 
          "level": "off"
        },
        "javascript:S125": { 
          "level": "off"
        },
        "javascript:S4138": { 
          "level": "off"
        },
        "javascript:S3776": { 
          "level": "off"
        },
        "javascript:S3626": { 
          "level": "off"
        },
        "javascript:S2310": { 
          "level": "off"
        },
        "javascript:S3358": { 
          "level": "off"
        }
      },
      "workbench.iconTheme": "material-icon-theme",
      "[javascriptreact]": { 
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[javascript]": { 
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[vue]": { 
        "editor.defaultFormatter": "octref.vetur"
      },
      // 默认使用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
        }
      },
      "editor.formatOnSave": true,
      "editor.tabSize": 4,
      // false去掉代码结尾的分号
      "prettier.semi": false,
      // 使用带引号替代双引号
      "prettier.singleQuote": true,
      // 去除最后一个对象结尾的逗号
      "prettier.trailingComma": "none",
      // 超过140字符进行换行
      "prettier.printWidth": 140,
      // (x) => {} 是否要有小括号默认avoid不要，always要
      "prettier.arrowParens": "avoid",
    }

**项目根目录下新建文件.prettierrc.js**

module.exports = { 
    	// 超过最大值换行
    	printWidth: 140,
    	// 行末是否加分号
    	semi: false,
    	// 用单引号代替双引号
    	singleQuote: true,
    	// tab键宽度，默认为4
    	tabWidth: 4,
    	// 最后一个对象元素加逗号
    	trailingComma: 'none',
    	// 开启 eslint 支持
    	'prettier.eslintIntegration': true,
    	// 指定使用哪一种解析器
    	parser: 'babel',
    	// 对象，数组加空格
    	bracketSpacing: true,
    	// 使用tab（制表符）缩进而非空格
    	useTabs: true,
    	// jsx > 是否另起一行
    	jsxBracketSameLine: false,
    	// (x) => {} 是否要有小括号默认avoid不要，always要
    	arrowParens: 'avoid',
    	// 是否要注释来决定是否格式化代码
    	requirePragma: false,
    	// 是否要换行
    	proseWrap: 'preserve',
    	// 保存时自动fix
    	'eslint.autoFixOnSave': true,
    	// 添加 vue 支持
    	'eslint.validate': [
    		'javascript',
    		'javascriptreact',
    		{ 
    			language: 'vue',
    			autoFix: true
    		}
    	]
    }

**根目录下新建文件.editorconfig**

# http://editorconfig.org
    # editorconfig顶级配置文件,停止向上寻找配置文件
    root = true
    
    [*]
    # 缩进风格tab或者space
    indent_style = tab
    # 缩进大小2或者4
    indent_size = 4
    # 换行符
    end_of_line = lf
    # 字符集
    charset = utf-8
    # 是否删除行尾的空格
    trim_trailing_whitespace = true
    # 是否在文件的最后插入一个空行
    insert_final_newline = true
    
    [*.md]
    trim_trailing_whitespace = false
    
    [Makefile]
    indent_style = tab

**根目录下新建文件.eslintrc.js**

module.exports = { 
      root: true,
      env: { 
        browser: true,
        node: true,
        es6: true
      },
      // extends: ['plugin:vue/essential', '@vue/standard'],
      extends: ['plugin:vue/recommended', 'eslint:recommended'],
      parserOptions: { 
        parser: 'babel-eslint',
        sourceType: 'module'
      },
      rules: { 
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        indent: ['off', 2],
        'no-irregular-whitespace': 'off',
        'vue/script-indent': ['error', 4, {  baseIndent: 1 }],
        'space-before-function-paren': [0, 'always'],
        // 强制在注释中 // 或 /* 使用一致的空格
        'spaced-comment': 0,
        // always-multiline：多行模式必须带逗号，单行模式不能带逗号
        'comma-dangle': [1, 'never'],
        // 末尾禁止使用分号
        'no-mixed-spaces-and-tabs': [1, 'smart-tabs'],
        // semi: 0,
        'no-tabs': 0,
        'linebreak-style': ['off', 'windows'],
        quotes: ['error', 'single'],
        semi: ['error', 'never']
      }
    }

vscode安装插件:

EditorConfig for VS Code
    Prettier