vscode中怎样格式化js代码_vscode中使用eslint格式化代码

vscode中使用eslint格式化代码

发布时间:2018-08-03 17:48,

浏览次数:898

, 标签:

vscode

eslint

vscode中使用eslint格式化代码

在vscode的插件商店中下载eslint

eslint配置

配置初始化

在vscode中按F1调出命令行,打Create ESLint configuration,会出现交互式配置

说明:

*

commonjs是使用module.exports和require的规范;

*

semi是结尾分号

*

indent是缩进

*

JSX是js的拓展

关于vue的配置文件

module.exports = { root: true, parser: 'babel-eslint', parserOptions: {

sourceType:'module' }, env: { browser: true, node: true, es6: true, }, extends:

'eslint:recommended', // required to lint *.vue files plugins: [ 'html' ], //

check if imports actually resolve 'settings': { 'import/resolver': { 'webpack':

{'config': 'build/webpack.base.conf.js' } } }, // add your custom rules here

//it is base on https://github.com/vuejs/eslint-config-vue 'rules': {

'accessor-pairs': 2, 'arrow-spacing': [2, { 'before': true, 'after': true }],

'block-spacing': [2, 'always'], 'brace-style': [2, '1tbs', { 'allowSingleLine':

true }], 'camelcase': [0, { 'properties': 'always' }], 'comma-dangle': [2,

'never'], 'comma-spacing': [2, { 'before': false, 'after': true }],

'comma-style': [2, 'last'], 'constructor-super': 2, 'curly': [2, 'multi-line'],

'dot-location': [2, 'property'], 'eol-last': 2, 'eqeqeq': [2, 'allow-null'],

'generator-star-spacing': [2, { 'before': true, 'after': true }],

'handle-callback-err': [2, '^(err|error)$'], 'indent': [2, 2, { 'SwitchCase': 1

}],'jsx-quotes': [2, 'prefer-single'], 'key-spacing': [2, { 'beforeColon': false

,'afterColon': true }], 'keyword-spacing': [2, { 'before': true, 'after': true

}],'new-cap': [2, { 'newIsCap': true, 'capIsNew': false }], 'new-parens': 2,

'no-array-constructor': 2, 'no-caller': 2, 'no-console': 'off',

'no-class-assign': 2, 'no-cond-assign': 2, 'no-const-assign': 2,

'no-control-regex': 0, 'no-delete-var': 2, 'no-dupe-args': 2,

'no-dupe-class-members': 2, 'no-dupe-keys': 2, 'no-duplicate-case': 2,

'no-empty-character-class': 2, 'no-empty-pattern': 2, 'no-eval': 2,

'no-ex-assign': 2, 'no-extend-native': 2, 'no-extra-bind': 2,

'no-extra-boolean-cast': 2, 'no-extra-parens': [2, 'functions'],

'no-fallthrough': 2, 'no-floating-decimal': 2, 'no-func-assign': 2,

'no-implied-eval': 2, 'no-inner-declarations': [2, 'functions'],

'no-invalid-regexp': 2, 'no-irregular-whitespace': 2, 'no-iterator': 2,

'no-label-var': 2, 'no-labels': [2, { 'allowLoop': false, 'allowSwitch': false

}],'no-lone-blocks': 2, 'no-mixed-spaces-and-tabs': 2, 'no-multi-spaces': 2,

'no-multi-str': 2, 'no-multiple-empty-lines': [2, { 'max': 1 }],

'no-native-reassign': 2, 'no-negated-in-lhs': 2, 'no-new-object': 2,

'no-new-require': 2, 'no-new-symbol': 2, 'no-new-wrappers': 2, 'no-obj-calls': 2

,'no-octal': 2, 'no-octal-escape': 2, 'no-path-concat': 2, 'no-proto': 2,

'no-redeclare': 2, 'no-regex-spaces': 2, 'no-return-assign': [2, 'except-parens'

],'no-self-assign': 2, 'no-self-compare': 2, 'no-sequences': 2,

'no-shadow-restricted-names': 2, 'no-spaced-func': 2, 'no-sparse-arrays': 2,

'no-this-before-super': 2, 'no-throw-literal': 2, 'no-trailing-spaces': 2,

'no-undef': 2, 'no-undef-init': 2, 'no-unexpected-multiline': 2,

'no-unmodified-loop-condition': 2, 'no-unneeded-ternary': [2, {

'defaultAssignment': false }], 'no-unreachable': 2, 'no-unsafe-finally': 2,

'no-unused-vars': [2, { 'vars': 'all', 'args': 'none' }], 'no-useless-call': 2,

'no-useless-computed-key': 2, 'no-useless-constructor': 2, 'no-useless-escape':

0, 'no-whitespace-before-property': 2, 'no-with': 2, 'one-var': [2, {

'initialized': 'never' }], 'operator-linebreak': [2, 'after', { 'overrides': {

'?': 'before', ':': 'before' } }], 'padded-blocks': [2, 'never'], 'quotes': [2,

'single', { 'avoidEscape': true, 'allowTemplateLiterals': true }], 'semi': [2,

'never'], 'semi-spacing': [2, { 'before': false, 'after': true }],

'space-before-blocks': [2, 'always'], 'space-before-function-paren': [2, 'never'

],'space-in-parens': [2, 'never'], 'space-infix-ops': 2, 'space-unary-ops': [2,

{'words': true, 'nonwords': false }], 'spaced-comment': [2, 'always', {

'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!',

','] }], 'template-curly-spacing': [2, 'never'], 'use-isnan': 2, 'valid-typeof':

2, 'wrap-iife': [2, 'any'], 'yield-star-spacing': [2, 'both'], 'yoda': [2,

'never'], 'prefer-const': 2, 'no-debugger': process.env.NODE_ENV ===

'production' ? 2 : 0, 'object-curly-spacing': [2, 'always', { objectsInObjects:

false }], 'array-bracket-spacing': [2, 'never'] } }

vscode配置

文件 > 首选项 > 设置

"files.autoSave": "off", "eslint.validate": [ "javascript", "javascriptreact",

"html", { "language": "vue", "autoFix": true } ], "eslint.options": { "plugins":

["html" ] }, // 保存时自动修复 "eslint.autoFixOnSave": true

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: VSCode可以通过安装插件来实现Vue代码ESLint格式化。 首先,在VSCode打开扩展面板(快捷键为Ctrl + Shift + X),搜索并安装"ESLint"插件。安装成后,重新加载VSCode。 接下来,在项目的根目录下找到并打开".eslintrc.js"文件,确保已按照项目需求正确配置了ESLint规则。如果没有该文件,则需要手动创建一个。在文件,可以添加、修改或删除适用的规则。例如,可以配置规则来检查和自动修复代码的缩进、引号等问题。 然后,在VSCode的设置,搜索"eslint.autoFixOnSave"选项,并将其设置为true。这会在保存文件时自动运行ESLint,并尝试修复代码的格式问题。此外,还可以设置"eslint.validate"选项来指定在保存文件时进行ESLint验证的文件类型。对于Vue项目,可以将其配置为"vue",以确保在保存Vue文件时进行ESLint验证。 最后,在Vue代码文件,可以根据需要手动触发ESLint格式化。可以使用快捷键(在Windows下为Shift + Alt + F,在Mac下为Shift + Option + F),或者右键点击编辑器空白处,选择"Format Document"选项来格式化当前文件。 总结起来,要在VSCode进行Vue代码ESLint格式化,需要先安装并配置ESLint插件,更新VSCode设置以自动修复问题,在需要时手动触发格式化操作。这样可以有效地帮助我们遵循代码规范,提高代码质量。 ### 回答2: 在VSCode使用Vue框架进行开发时,可以借助ESLint格式化代码,以保持代码的一致性和可读性。 首先,在VSCode的插件商店搜索并安装ESLint插件。然后,在项目的根目录下创建一个.eslintrc.js或者.eslintrc.json的配置文件。 在配置文件,可以指定要使用ESLint规则,以及各种代码风格规范。一般来说,我们可以选择一种预设规则集,比如"eslint:recommended"或者"plugin:vue/recommended",它们包含了一系列通用的规则以及针对Vue的特定规则。 此外,我们还可以根据团队的要求,自定义一些规则,比如缩进、引号、变量命名等等。可以根据自己的代码风格和习惯来设置这些规则。 配置成后,可以在VSCode的设置,开启"eslint.autoFixOnSave"选项,这样在保存文件时,ESLint会自动格式化代码并修复一些常见的错误。 在使用过程,可能会遇到一些问题,比如与其他插件的冲突,或者某些规则与项目要求不符。此时,可以根据具体情况进行相应的调整和配置。 总之,通过VSCodeESLint的配合使用,可以有效地进行Vue代码格式化和规范化,提高代码的质量和可维护性。 ### 回答3: VSCode是一款非常流行且功能强大的代码编辑器,对于Vue开发来说,它也提供了很好的支持。其一个重要的功能就是ESLint代码格式化ESLint是一种JavaScript代码的静态分析工具,可以用来检查和格式化代码。Vue项目使用ESLint可以让开发者在编代码时保持一致的代码风格,并且能够及时发现潜在的问题。 在VSCode使用ESLint进行代码格式化,首先需要安装ESLint插件。打开VSCode,点击左侧的扩展按钮,搜索并安装"ESLint"插件。安装成后,重启VSCode。 接下来,需要在项目配置ESLint。在Vue项目的根目录下,创建一个名为".eslintrc.js"的文件,并在其添加以下内容: ```javascript module.exports = { root: true, env: { node: true, }, extends: [ 'plugin:vue/essential', 'eslint:recommended', ], parserOptions: { parser: 'babel-eslint', }, rules: { // 在这里可以添加自定义的编码规范 }, }; ``` 在这个配置文件,我们将ESLint的规则继承了"plugin:vue/essential"和"eslint:recommended",同时也可以在"rules"添加自定义的编码规范。 保存配置文件后,当我们在VSCode打开Vue项目代码文件时,ESLint就会自动进行代码格式化。它会根据配置文件的规则,对代码进行静态分析,并给出错误或警告信息。可以通过按下Ctrl + Shift + P,然后输入"Format Document"来手动触发代码格式化。 总结一下,在VSCode使用ESLint进行Vue代码格式化,需要安装ESLint插件,并在项目配置ESLint。这样,开发者就可以在代码过程保持一致的代码风格,并及时发现潜在的问题。希望这个回答对你有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值