спецификация интерфейса

внешний интерфейс

С ростом зрелости интерфейсной разработки стандартизация кода играет большую роль в повышении эффективности разработки, включая последующее обслуживание.Унифицированные спецификации могут сэкономить время и стоимость передачи, а спецификации включают структуру каталогов, качество кода (именование, комментарии и т. д.). ., спецификация JS, спецификация CSS, отступы и т. д.)

1.eslint

Подключаемый инструмент обнаружения кода javascript, который можно использовать для проверки распространенных ошибок кода javascript и проверки стиля кода.

Используйте два пакета расширений (спецификация airbnb и eslint-plugin-vue)

1.1 Как установить eslint

 npm install -g eslint

1.2 Как интегрировать eslint в проект

  • Способ 1: настройте eslintConfig в packjson

Правила, связанные с вышеизложенным, были скорректированы на основе пакета расширения и изменены на основе двух спецификаций в соответствии с вашими спецификациями.

  • Способ 2: вручную создать .eslintrc.js

    Скопируйте содержимое eslintconfig в методе 1 в файл .eslintrc.js.

  • Способ 3: инициализировать с помощью инструмента командной строки eslint, а затем изменить .eslintrc

1.3 Как использовать

1.3.1 Добавить скриптовые команды в скрипты в packjson
  • Использование в vue-cli 3
"lint":"vue-cli-service lint"
  • другие методы
"lint":"eslint --ext .js,.vue src"

🙆 Обнаружение правильных подсказок🙅 Плохие подсказки

1.3.2 Как заблокировать ненужные обнаружения (например, модульные тесты, локальные макеты и т. д.)

Создать .eslintignore

1.4 Как интегрироваться в CI/CD

Ссылка сканирования кода интегрирована в ссылку развертывания, если спецификация не работает, выпуск не работает.

Добавить в Jenkinsfile

1.5 Общие правила eslint

1.5.1 Общие правила js

официальныйнажмите на меня 🚀

rules:{
 "no-unused-vars": "warn", //是否支持存在未使用的变量
 'no-debugger': process.env.NODE_ENV === 'production' ? 'error': 'off', //是否禁止debugger
 'no-console': process.env.NODE_ENV === 'production' ? 'error': 'off', //是否禁止console.log
  "no-var": "warn", 
  "no-eval": "warn",//禁止使用eval
}
1.5.2 Связанный с Vue (eslint-plugin-vue)

Обратитесь к официальному руководству по стилю Vue,нажмите на меня 🚀

rules:{
  "vue/prop-name-casing": ["error", "camelCase"],// prop名大小写：在声明 prop 的时候，其命名应该始终使用 camelCase
  "vue/name-property-casing": ["error", "PascalCase"], // JS/JSX 中的组件名应该始终是 PascalCase 的
  "vue/require-prop-types": "error", // props定义尽量详细
  "vue/require-v-for-key": "error", // v-for设置键值，与key结合使用
   "vue/no-use-v-if-with-v-for": ["error", {
    "allowUsingIterationVar": false
  }], //不要把 v-if 和 v-for 用在同一个元素上
  "vue/max-attributes-per-line": ["error", {
    "singleline": 1,
    "multiline": {
      "max": 1,
      "allowFirstLine": false
    }
  }], //多个特性的元素应该分多行撰写，每个特性一行
}
1.5.3 Включить Отключить
  • "off" или 0 - выключить правило
  • "warn" или 1 - включить правило, использовать предупреждения уровня ошибок: warn (не вызывает выход из программы)
  • "ошибка" или 2 - включить правило, использовать уровень ошибки error:error (при срабатывании программа выйдет)

2. Prettier

Prettier — это инструмент для форматирования кода. Используется для сохранения единообразия стиля проекта команды.

2.1 Как настроить

  • Способ 1: Создайте .prettierrc в корневом каталоге

  • Способ 2. Создайте новое более красивое свойство в package.json.

//方式1 

module.exports = {
  "printWidth": 160, //一行的字符数，如果超过会进行换行，默认为80
  "tabWidth": 2, //一个tab代表几个空格数
  "useTabs": false, //是否使用tab进行缩进，默认为false，表示用空格进行缩减
  "singleQuote": false, //字符串是否使用单引号，默认为false，使用双引号
  “useEditorConfig”: false, // 是否使用项目中的.editorconfig文件
  "semi": true, //行位是否使用分号，默认为true
  "bracketSpacing": true, //对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
}

2.2 Как использовать

Используйте плагин eslint-plugin-prettier, чтобы добавить prettier в качестве конфигурации правил ESLint, и запустите Prettier в ESLint.

2.2.1 Установка

Установить eslint-плагин-красивее

npm install --save-dev eslint-plugin-prettier
2.2.2 Настройка eslint
// packjson
"eslintConfig": {
    "extends": [
      "plugin:vue/essential",
      "@vue/airbnb",
      "prettier"
    ],
    "plugins": [
      "prettier"
    ],
    "rules": {
      "prettier/prettier": "error",
     }
 }

ps🏆: Prettier был введен в расширения и плагины соответственно, чтобы правила, настроенные eslint, не конфликтовали с правилами, настроенными Prettier.

3. Ограничения класса документов

Ограничения класса документа могут ссылаться на некоторые существующие спецификации команды.

Продолжение следует...

Категории