解决Strings must use singlequote方法以及eslint与本地格式化规则起冲突时的解决办法

问题：写代码的时候出现红色波浪线，报错Strings must use singlequote？

描述：今天，有个小伙伴问我，他从网上down了一个项目下来，安装完毕之后，打开了这个项目的某一个js文件，结果，一打开就报了一堆红色波浪线，他搜了许久说是eslint的错误，不知道如何解决？

解答：其实就是eslint和本地格式化程序起冲突了，比如上述的这个问题

Strings must use singlequote

这是代表 字符串必须是用单引号，而不是双引号定义，这种问题一般出现在保存后，比如我的vscode配置，我喜欢设置成保存的时候代码自动格式化，而格式化插件使用的是 Prettier - Code formatter，相信很多小伙伴跟我一样，根据我的设置在格式化的时候 Prettier 会自动的将单引号格式化成双引号，而这是因为eslint规则就会被触发，eslint会说，这个不对，应该是单引号然后就会报错，显示红色波浪线…

知道了原因，就很好解决了，一般而言是两种解决办法：

第一种，修改eslint的规则；
第二种，修改格式化规则；

比如这里，可以使用修改格式化规则达到目的，因为eslinst不就是说书写的不规范，那么格式化后达到eslint的规范就行了，以第二种为例，在根目录下新建文件：.prettierrc，里面加上内容

{"singleQuote": true,  // 单独加上这一条就行"tabWidth": 4,    // 行前4个空格"semi":true, // 末尾加上分号"trailingComma":"none" // 取消末尾加上逗号
}

修改eslint

忽略，不检查

修改eslint，最简单的一种，就是忽略…也就是不检查，一了百了，在项目的根目录下新建一个文件，文件名：.eslintignore（就是这个，不要加多余的东西），然后文件里可以添加待忽略的文件或文件夹，比如：

# 忽略目录
build/
tests/
node_modules/
src/micpo# 忽略文件
**/*-min.js
**/*.min.jsiconfont.js

忽略目录后，改目录下所有文件都不会被eslint检测到；

配置

配置eslint的规则有两种，一种是在vscode的setting.json里配置，另外一中就是在项目的根目录新建一个文件，文件名：.eslintrc.js，
大致用法如下：

module.exports = {root: true,parserOptions: {ecmaVersion: 7,ecmaFeatures: {'jsx': true,'modules': true},parser: 'babel-eslint'},env: {es6: true,node: true},extends: ['eslint:recommended','plugin:vue/recommended'],plugins: ['vue'],globals: {document: false,navigator: false,window: false},rules: {'accessor-pairs': 2,'arrow-spacing': [2, {'before': true,'after': true}],'block-spacing': [2, '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-console': 0,'no-caller': 2,'no-class-assign': 2,'no-cond-assign': 2,'no-const-assign': 2,'no-control-regex': 2,'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': 0,'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, 'always'],'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'],'vue/jsx-uses-vars': 2,'vue/max-attributes-per-line': ['error', {'singleline': 3,'multiline': {'max': 13,'allowFirstLine': false}}],'vue/html-self-closing': ['error', {'html': {'void': 'never','normal': 'any','component': 'any'},'svg': 'always','math': 'always'}]}}

修改Prettier

配置Prettier的规则有两种，一种是在vscode的setting.json里配置，另外一中就是在项目的根目录新建一个文件，文件名：.prettierrc，
大致用法如下：

{"tabWidth": 4, // tab缩进大小,默认为2"useTabs": false, // 使用tab缩进，默认false"semi": false,    // 使用分号, 默认true"singleQuote": false, // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)"trailingComma": "all", // 行尾逗号,默认none,可选 none|es5|all"bracketSpacing": true,    // 对象中的空格 默认true// JSX标签闭合位置 默认false// false: <div//          className=""//          style={{}}//       >// true: <div//          className=""//          style={{}} >"jsxBracketSameLine": false,// 箭头函数参数括号 默认avoid 可选 avoid| always// avoid 能省略括号的时候就省略 例如x => x// always 总是有括号"arrowParens": "avoid"
}